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Avant-propos 



JavaScript est un langage de script tres populaire, utilise notamment afin d'implementer 
des traitements dans les pages Web. Tout au long de cet ouvrage, nous nous efforcons de 
detailler les differents concepts de ce langage ainsi que les mecanismes a mettre en 
oeuvre afin de l'utiliser dans ce type de pages. 

Le langage JavaScript permet de realiser des traitements evolues dans les pages Web en 
offrant la possibility d'utiliser les differents standards Web supportes par les navigateurs 
et d'interagir avec eux. Certaines specificites de ces derniers restent neanmoins a prendre 
en compte afin de garantir leur portability. 

Longtemps freinee par le support heterogene de ces standards, 1' utilisation du langage 
JavaScript a ete facilitee par 1' apparition de bibliotheques integrant la prise en compte de 
ces specificites quant a la resolution de problematiques particulieres. 

De solides connaissances sont necessaires pour mettre en oeuvre ce langage dans des 
applications de type Web 2.0, dont l'interface graphique est plus evoluee et interactive. 
Heureusement, des bibliotheques JavaScript ont ete mises au point afin d' aider au deve- 
loppement de ce type d' application Web. 

Loin d'etre uniquement dedie aux applications de type Web 2.0, JavaScript ouvre d'inte- 
ressantes perspectives afin d'ameliorer et d'optimiser les interfaces graphiques des appli- 
cations Web classiques en se fondant sur les techniques Ajax. 

Objectifs de cet ouvrage 

Cet ouvrage se veut un guide pratique pour le developpement de traitements fondes sur le 
langage JavaScript dans les pages Web. 

Nous avons voulu le rendre accessible au plus grand nombre afin de permettre a tout 
developpeur Web d'utiliser ce langage dans differents contextes et de devenir plus 
productif dans son utilisation de JavaScript. C'est la raison pour laquelle il detaille aussi 
bien les mecanismes de base du langage que son utilisation dans des pages Web. Avant 
tout didactique, il vise a rendre le lecteur directement operationnel dans 1' utilisation des 
differentes facettes du langage. 



JavaScript pour le Web 2.0 



Tout au long de l'ouvrage, nous mettons en ceuvre diverses bibliotheques JavaScript 
gratuites et populaires. Ces dernieres adressent un ou plusieurs aspects des developpements 
fondes sur ce langage et integrent les specificites des differents navigateurs pour la prise 
en compte des standards Web. 

Cette volonte d'accessibilite ne signifie pas pour autant que l'ouvrage soit d'une lecture 
simple et peu technique. Au contraire, nous y abordons des sujets avances, tels que les 
principes de la programmation orientee objet et d'Ajax, ainsi que des bonnes pratiques 
afin de structurer et optimiser les developpements fondes sur JavaScript. 

Convaincus que Ton apprend mieux par la pratique, nous proposons au lecteur une etude 
de cas pratique, sous la forme d'une application de gestion de sites archeologiques. Cette 
application s'appuie sur la bibliotheque dojo et sur l'outil Google Maps, dont l'ouvrage 
detaille la mise en ceuvre conjointe. 



Organisation de l'ouvrage 



L'ouvrage commence par decrire les concepts et mecanismes de base de JavaScript. II 
aborde ensuite les mecanismes relatifs a la programmation graphique avec ce langage, 
conjointement avec les langages HTML, xHTML et CSS. 

Diverses bibliotheques facilitant 1' utilisation des mecanismes abordes sont presentees et 
mises en oeuvre. 

Nous avons fait 1' effort de degager autant que de besoin les bonnes pratiques d' utilisation 
de ce langage. 

L'ouvrage comporte les six grandes parties suivantes : 

• La premiere partie introduit les mecanismes de base du langage JavaScript. La maniere de 
mettre en oeuvre la programmation orientee objet ainsi que le support de la technologie 
DOM par ce langage y sont decrits et detailles. Les techniques Ajax sont egalement 
abordees afin de permettre l'echange de donnees par les pages Web sans les recharger. 

• La partie II concerne les bibliotheques JavaScript de base, dont l'objectif est de faci- 
liter l'utilisation des divers mecanismes du langage abordes dans la premiere partie. 
Sont ainsi introduites les fondations de prototype, une bibliotheque JavaScript legere 
et populaire, et de dojo, une bibliotheque tres complete. 

• Avec la partie III, l'ouvrage aborde les problematiques graphiques des traitements 
JavaScript dans les pages Web. Apres avoir rappele le fonctionnement des langages 
HTML, xHTML et CSS, nous montrons comment JavaScript peut interagir avec ces 
langages et comment mettre en oeuvre des composants graphiques. L accent est mis 
tout au long de cette partie sur la structuration et la separation des differents langages 
et traitements mis en oeuvre. 

• Afin de developper des applications graphiques avec le langage JavaScript, bien des 
aspects doivent etre pris en compte et maitrises. De nombreuses bibliotheques Java- 
Script sont disponibles sur Internet afin de masquer ces problematiques et de mettre a 
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disposition des mecanismes et des composants graphiques prets a l'emploi et portables. 
La partie IV introduit certaines d'entre elles, notamment prototype, script.aculo.us et 
behaviour. Par la suite, sont decrites les bibliotheques dojo et rialto, plus completes et 
offrant des mecanismes de gestion des composants graphiques. 

• Dans la philosophie du Web 2.0, ou le Web correspond a une veritable plate-forme, la 
partie V aborde les problematiques relatives a l'integration et a l'interaction avec des 
services externes dans des pages Web en se fondant sur le langage JavaScript. Y sont 
notamment presentes Google Maps, l'outil cartographique de Google, et la maniere 
d'utiliser des donnees de services des sites Yahoo! et Amazon, accessibles par le biais 
de 1' architecture REST. 

• La partie VI decrit divers outils connexes au langage JavaScript permettant d'ameliorer 
la qualite des traitements JavaScript ainsi que la productivite de leur developpement. 
Sont abordes les tests unitaires avec JsUnit et l'outillage disponible pour Pecriture et la 
mise en ceuvre de ce type de traitement. 

A propos de I'etude de cas 

L etude de cas, une application de gestion de sites archeologiques, est un exemple concret 
d'utilisation du langage JavaScript, de la bibliotheque dojo et de Poutil Google Maps. 

Elle permet au lecteur de voir concretement comment les differents mecanismes et tech- 
niques abordes tout au long de l'ouvrage peuvent etre utilises conjointement afin de 
developper une application Web riche et interactive. 

Loin de n'etre qu'un simple exemple, cette application correspond a un prototype servant 
de fondation a une application de gestion de donnees archeologiques pour une universite 
francaise. 

L etude de cas est accessible en demonstration sur la page du site de SourceForge dediee 
a l'ouvrage, a l'adresse http://jsweb2.sourceforge.net. 

A qui s'adresse l'ouvrage ? 

Cet ouvrage s'adresse a tout developpeur Web souhaitant decouvrir ou redecouvrir le 
langage JavaScript. L accent a ete mis sur les mecanismes de base du langage ainsi que 
sur les possibilites offertes au developpement de traitements simples ou evolues dans des 
pages Web dans l'esprit du Web 2.0. 

II n'est nul besoin d'etre expert dans les technologies presentees. Chaque chapitre 
presente clairement chacune d' elles puis montre comment le langage JavaScript la met 
en oeuvre ou interagit avec. Les differents langages, tels que HTML, xHTML et CSS, 
ainsi que les techniques mis en oeuvre dans les pages Web sont egalement detailles. 

Pour toute question concernant l'ouvrage, vous pouvez contacter ses auteurs sur la page Web 
dediee du site d'Eyrolles, a l'adresse www.editions-eyrolles.com, ou sur le site de l'ouvrage, a 
P adresse jsweb2.sourceforge.net. 
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Introduction 



JavaScript, le langage de script par excellence des navigateurs Web, offre la possibilite 
d'implementer des traitements elabores dans des pages Web. II peut etre mis en oeuvre 
dans toute application disposant d'un interpreteur pour ce langage. 

Bien que le noyau de JavaScript soit standardise par 1' intermediate du langage ECMAScript, 
aucune standardisation n'est disponible quant a ses differents dialectes utilises dans les 
navigateurs Web. Diverses specificites sont done a prendre en compte dans ces navigateurs 
pour utiliser JavaScript. 

Longtemps freine par les incompatibilites entre les differentes implementations des navi- 
gateurs, ce langage est devenu le fondement des applications Web 2.0. II permet desor- 
mais de definir des traitements evolues en leur sein arm de gerer notamment l'interaction 
avec les utilisateurs et les echanges de donnees avec des applications ou des services 
accessibles par le biais d' Internet. 

Dans ce chapitre introductif, nous explorons les fondements du langage JavaScript ainsi 
que son historique. 

Nous verrons ensuite en quoi ce langage constitue la brique fondamentale des applica- 
tions Web 2.0 en nous penchant sur la facon dont il s'integre dans les elements constitutifs 
des pages HTML. 

Le langage JavaScript 

II existe une certaine confusion autour des termes JavaScript, JScript et ECMAScript. De 
plus, contrairement a ce que leur nom pourrait laisser penser, JavaScript et Java n'ont que 
peu de similitudes, hormis celles issues de leur parent commun, le langage C, et qui se 
limitent a la syntaxe de base. 
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Historique 



Le langage JavaScript a ete cree par Brench Eich pour le compte de Netscape Communi- 
cations Corporation. En novembre 1996, il a servi de fondation a la premiere version du 
standard ECMA-262 decrivant le langage ECMAScript. JavaScript correspond done a un 
dialecte de ce standard et a evolue independamment par la suite. 



ECMA (European Computer Manufacturers Association) 

Fonde en 1961 et a vocation internationale depuis 1994, ECMA est un organisme de standardisation pour 
les systemes d'information et de communication. Son objectif est de developper et promouvoir divers stan- 
dards afin de faciliter I'utilisation des technologies de I'information et de la communication. ECMA a publie a 
ce jour plus de 370 standards et rapports techniques, dont les deux tiers ont ete adoptes en tant que stan- 
dards internationaux, et est responsable des standards relatifs aux langages C++, C#, Eiffel et ECMAScript. 



Face au succes de JavaScript en tant que langage de script pour les pages Web, Microsoft 
a sorti, en aout 1996, le langage JScript, similaire a JavaScript et correspondant egalement 
a un dialecte du langage ECMAScript. 

Ainsi, chaque navigateur supporte ECMAScript par 1' intermediate de son propre dialecte. 
Par abus de langage, tous ces dialectes sont designes par le terme JavaScript. 

Les tableaux 1.1 et 1.2 recapitulent les niveaux de conformite entre les versions de la 
specification ECMAScript et celles de ses principaux dialectes, JavaScript et JScript. 

Tableau 1 .1 Niveaux de conformite entre ECMAScript et JavaScript 



Version de JavaScript 


Version de ECMAScript 


1.0 (Netscape 2.0, mars 1996) 




1.1 (Netscape 3.0, aout 1996) 


~| 


1.2 (Netscape 4.0, juin 1997) 


1.3 (Netscape 4.5, octobre 1998) 


Versions 1 (juin 1997) et 2 (juin 1998) 


1 .4 (Netscape Server) 


~| 


1 .5 (Netscape 6.0 et versions suivantes de Netscape 
et Mozilla) 


Version 3 (decembre 1999) 


1 .6 (Gecko 1 .8 et Firefox 1 .5, novembre 2005) 


Version 3 ainsi que le support de E4X, extensions des 
tableaux ainsi que les chaines et tableaux generiques 


1 .7 (Gecko 1 .8.1 , Firefox 2.0, fin 2006) 


Version 3 avec les fonctionnalites de JavaScript 1 .6 
ainsi que diverses autres fonctionnalites 


Tableau 1 .2 Niveaux de conformite entre ECMAScript et JScript 


Version de JScript 


Version de ECMAScript 


1.0 (Internet Explorer 3.0, aout 1996) 


2.0 (Internet Explorer 3.0, Janvier 1 997) 


3.0 (Internet Explorer 4.0, octobre 1997) 


Versions 1 (juin 1997) et 2 (juin 1998) 
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Tableau 1 .2 Niveaux de conformite entre ECMAScript et JScript (suite) 



Version de JScript 


Version de ECMAScript 


4.0 (Visual Studio 6) 


5.0 (Internet Explorer 5.0, mars 1 999) 


5.1 (Internet Explorer 5.01) 


5.5 (Internet Explorer 5.5, juillet 2000) 


Version 3 (decembre 1999) 


5.6 (Internet Explorer 6.0, octobre 2001 ) 


.Net (ASP.NET) 



La section suivante detaille la specification ECMAScript, dont l'objectif est la description 
du noyau du langage JavaScript. 

ECMAScript 

Fonde sur la specification ECMA-262, ECMAScript consiste en un langage interprets, 
dont l'objectif est de permettre la manipulation d'objets fournis par l'application hote. 

Cette specification decrit les divers elements suivants : 

• syntaxe et mots-cles ; 

• conventions et notations ; 

• types et conversions de types ; 

• contextes d'execution ; 

• expressions et structures de controle ; 

• fonctionnement des fonctions ; 

• objets natifs. 

Ce langage met aussi en oeuvre le concept des prototypes. Ce dernier correspond a un 
style de programmation orientee objet, dans lequel la notion de classe est absente. La 
reutilisation des traitements se realise par clonage d'objets existants servant de modele et 
non sous forme d'instanciation de classes. 

Les differentes versions de la specification ECMA-262 sont recapitulees au tableau 1 .4. 
Tableau 1.4 Versions de la specification ECMA-262 

Description 

Version initiale fondee sur la premiere version de JavaScript de Netscape 

Modifications en vue de la faire correspondre au standard international ISO/IEC 16262 

Ameliore la specification precedente en ajoutant, entre autres, le support des expressions, 
une meilleure gestion des chaines, de nouvelles structures de controle et la gestion des 
exceptions fondee sur les mots-cles try et catch. 

En cours Apportera peut-etre des mots-cles afin de definir explicitement les classes, les packages, les 

espaces de nommage ainsi que, de maniere optionnelle, le type statique des donnees. 



Version 


Date 


1 Juin 1997 


2 


Juin 1998 


3 


Decembre 1999 
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En juin 2004, est paru le standard ECMA-357, plus connu sous le nom de E4X (ECMA- 
Script for XML). II correspond a une extension du langage ECMAScript, auquel il ajoute 
un nouveau support de XML. Son objectif est de fournir une solution de rechange au DOM 
arm d'acceder plus simplement et de maniere intuitive aux elements d'un document XML. 

Les differentes specifications sont disponibles aux adresses suivantes : 

• ECMAScript : http://www.ecma-international.org/publications/standards/Ecma-262.htm. 

• E4X : http://www.ecma-international.org/publications/standards/Ecma-357.htm. 



JavaScript 



D'une maniere generale, JavaScript designe les dialectes du langage ECMAScript tels 
que recapitules au chapitre 2. 

Ces dialectes enrichissent 1' ensemble des objets de base du langage ECMAScript avec 
d'autres objets provenant de l'environnement d'execution du script. Cet environnement 
peut correspondre a un navigateur Web ou a un interpreteur JavaScript embarque dans 
une application. 

Ces objets peuvent etre normalises, comme c'est quasiment le cas de ceux relatifs a la 
technologie DOM (Document Object Model), ou etre specifiques du navigateur. 



DOM (Document Object Model) 

DOM correspond a une representation en memoire d'un arbre XML normalises sous forme d'objets. Dans 
le cas de pages HTML, cette technologie offre la possibilite de manipuler leur structure en memoire par 
programmation. Nous detaillons cette technologie au chapitre 4. 



La figure 1.1 illustre les differents elements JavaScript disponibles dans un navigateur Web. 
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Les objets specifiques d'un navigateur ne sont pas forcement presents dans tous les navi- 
gateurs. De plus, les objets standardises fournis par les navigateurs peuvent posseder des 
variantes, les navigateurs pouvant supporter parallelement diverses versions de la meme 
specification. 

Le langage JavaScript peut etre utilise dans des pages Web mais egalement dans d'autres 
types d' applications. Ces dernieres doivent integrer un interpreteur relatif a ce langage 
afin de le mettre en oeuvre. 



JavaScript dans un navigateur Web 

JavaScript propose differents mecanismes permettant de faire interagir les elements ecrits 
avec les langages HTML, xHTML et CSS d'une page Web avec les scripts JavaScript. 



HTML et xHTML 

Le HTML (HyperText Markup Language) est un langage de balisage utilise afin de mettre en ceuvre des 
pages Web contenant notamment des liens et des elements graphiques. Ces pages sont congues pour 
etre affichees dans des navigateurs Web. 

Positionne en tant que successeur du HTML, le xHTML (extensible HyperText Markup Language) est un 
langage distinct, qui reformule le HTML. De ce fait, les pages Web utilisant le xHTML doivent etre bien 
formees au sens XML. Toutes les balises doivent etre correctement fermees et les attributs delimites par 
le caractere « ou '. 



CSS 

CCS (Cascading Style Sheets) adresse les problematiques d'affichage des pages HTML. Son objectif est 
de permettre une separation claire entre la structure d'une page, par le biais des langages HTML ou 
xHTML, et sa presentation, decrite avec CSS. 



La page est d'abord chargee par le navigateur a partir d'un site Web. Cette page correspond 
a un fichier contenant des elements HTML ou xHTML. Elle peut egalement contenir ou 
faire reference a divers blocs heterogenes. Par exemple, des scripts JavaScript ainsi que 
des styles CSS peuvent s'y trouver. 

Tous ces elements permettent au navigateur d'initialiser la page Web, aussi bien au niveau 
de sa structure que de son interface graphique et de ses traitements. 

Les elements HTML ou xHTML sont utilises par le navigateur afin d'initialiser la struc- 
ture de la page en memoire. Cette structure se fonde sur la technologie DOM (Document 
Object Model), une representation objet hierarchique de la page. 

Le navigateur s'appuie sur les styles CSS pour donner une representation graphique a la 
page. Notons que la structure HTML ou xHTML de la page peut egalement influer sur 
cette representation. 

Les scripts JavaScript permettent d'ajouter des traitements a la page. Ces derniers peuvent 
etre executes a son chargement ou en reponse a divers evenements. 
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La figure 1.2 illustre les differents constituants d'une page Web ainsi que leurs interactions. 
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Figure 1.2 

Interactions entre les differents constituants d'une page Web 
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Une fois la page chargee en memoire, il est possible de la manipuler avec JavaScript en 
se fondant sur la technologie DOM. Cette derniere permet d'influer sur la structure de la 
page en ajoutant, modifiant ou supprimant des elements, mais egalement sur sa represen- 
tation graphique puisque les styles CSS peuvent etre vus ou rattaches en tant que proprietes 
d'elements HTML. 

Nous constatons que le DOM est central dans une page Web et que c'est a partir de lui 
que la manipulation de la page Web est envisageable. 

La figure 1 .2 montre que JavaScript peut modifier la structure du DOM mais egalement 
etre notifie suite a differents evenements. Les evenements specifies au niveau du DOM 
peuvent correspondre a des evenements utilisateur, tels qu'un clic sur un element HTML, 
ou a des modifications de la structure DOM en memoire. 

Des observateurs peuvent etre enregistres au niveau de cette structure afin d'etre appe- 
les lorsque l'evenement se produit. Dans le cas de JavaScript, ces observateurs corres- 
pondent a de simples fonctions ou a des methodes d'objets qui ont acces a l'evenement 
declencheur. 

Maintenant que nous avons decrit le fonctionnement et l'interaction des langages HTML, 
xHTML et CSS avec JavaScript, nous allons montrer en quoi JavaScript permet de mettre 
en oeuvre des applications Web 2.0. 
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JavaScript, fondation du Web 2.0 



Comme indique precedemment, JavaScript constitue la cle de voute du Web 2.0. Nous 
detaillons dans cette section les problematiques techniques liees a ce nouveau paradigme 
d' Internet. 

Enrichissement des interfaces graphiques 

En se fondant sur les technologies HTML, xHTML et CSS, JavaScript offre la possibilite 
de realiser des interfaces graphiques de pages Web plus elaborees et plus interactives. 

Le support ameliore de la technologie CSS par les navigateurs a egalement grandement 
favorise cet enrichissement. 

Interactivity 

JavaScript offre la possibilite d'ajouter de l'interactivite a une page Web. 

Les evenements peuvent etre traites localement par la page par l'intermediaire de fonctions 
ou methodes d'objets JavaScript, comme nous l'avons vu a la section precedente. 

En effet, le langage offre la possibilite de declencher des traitements suite a des evenements 
utilisateur par le biais de la technologie DOM. Les entites JavaScript enregistrees pour 
l'evenement sont alors declenchees afin de realiser des traitements. 

Ces derniers peuvent aussi bien modifier la structure en memoire de la page, realiser des 
effets graphiques ou interagir avec des applications ou des services accessibles par le biais 
d 'Internet. 

Prise en compte des navigateurs 

La plupart des navigateurs du marche possedent differentes specificites quant a l'utilisation 
du DOM, de CSS et de JavaScript. La difficulte consiste done a assurer le meme rendu 
dans differents navigateurs. 

La resolution de ce probleme passe par l'utilisation de bibliotheques JavaScript fournis- 
sant une abstraction par rapport a ces specificites par l'intermediaire de collections de 
fonctions et de composants graphiques. Ainsi, le code de detection et de prise en compte 
des navigateurs est desormais externalise des pages Web et gere au niveau de ces biblio- 
theques. Les pages Web n'ont plus qu'a utiliser ces composants implementes en utilisant 
les divers mecanismes du langage JavaScript. 

Les specificites des navigateurs ne sont pas uniquement relatives aux aspects graphiques 
des pages Web et peuvent consister en des supports differents des versions des technologies. 
C'est le cas notamment de la technologie DOM avec les navigateurs Internet Explorer et 
Firefox. Les bibliotheques JavaScript integrent egalement ces aspects. 

Nous traitons en detail tous ces aspects a la partie III de l'ouvrage relative a la program- 
mation Web graphique avec JavaScript. 
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Echanges de donnees 

JavaScript permet de realiser des requetes HTTP en recourant aux mecanismes fournis 
par le langage JavaScript. La plupart des navigateurs recents supportent desormais cette 
fonctionnalite. 



HTTP (HyperText Transfer Protocol) 

HTTP correspond au protocole de transport applicatif de base d'lnternet. II s'agit d'un protocole ASCII 
transportant des informations sous forme de texte et qui peut fonctionner sur n'importe quel protocole 
reseau fiable, le plus souventTCP. 



Les pages Web ont desormais la possibility d'echanger des donnees avec des applications 
distantes par l'intermediaire du protocole HTTP sans avoir a recharger completement 
leurs interfaces graphiques. 

Jusqu'a present, l'envoi d'un formulaire vers une ressource ou l'appel d'une ressource 
par le biais d'une adresse permettait d'echanger des donnees. L'interface graphique realisant 
la requete etait cependant perdue et remplacee par l'interface graphique de la ressource 
appelee. 

Ces traitements sont toujours possibles mais peuvent etre realises dans la page, sans avoir 
a recharger ni a toucher a son interface graphique. II devient de surcroit possible d'echanger 
des donnees plutot que du contenu correspondant a des pages Web. 

Les techniques mises en oeuvre ici sont communement designees par l'acronyme AJAX 
(Asynchronous JavaScript and XML). Elles se fondent sur JavaScript arm d'executer 
une requete HTTP dans une page Web et de traiter sa reponse de maniere synchrone ou 
asynchrone. 

Plusieurs approches sont possibles pour cela. L'une d'elles s'appuie sur la classe Java- 
Script XMLHttpRequest, presente dans la plupart des navigateurs recents et en cours de 
standardisation par le W3C. Cette classe offre la possibility d'executer une requete HTTP 
et de gerer la reponse. Cette approche se fonde uniquement sur le langage JavaScript. 



W3C (World-Wide Web consortium) 

Le W3C est un consortium dont I'objectif est de promouvoir les technologies Web (HTML, xHTML, XML, 
CSS, etc.). Cet organisme n'emet pas de norme mais des recommandations representant des standards. 



Deux autres approches peuvent etre mises en oeuvre a l'aide de balises des langages 
HTML et xHTML. Ces approches doivent etre utilisees lorsque la classe precedente n'est 
pas disponible ou arm d'outrepasser ses limitations. 

Dans tous les cas, JavaScript utilise la technologie DOM pour mettre a jour une ou 
plusieurs parties de l'interface graphique a partir des donnees recues dans la reponse. 

Les mecanismes de communication fondes sur Ajax sont illustres a la figure 1.3. 

Nous detaillons les differentes techniques relatives a Ajax au chapitre 5. 
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Figure 1.3 

Mecanismes de communication fondes sur Ajax 

Structuration des applications 

Comme JavaScript devient de plus en plus present dans les applications Web 2.0, il est 
indispensable de bien structurer les pages Web en fonction des technologies mises en 
oeuvre et des traitements qu'elles integrent. 

Cette structuration peut etre realisee a differents niveaux. 

Isolation des langages 

Dans la mesure ou les pages Web peuvent recourir a differents langages, il est important 
de bien separer leur utilisation et de soigner leurs interactions. 

Les styles CSS doivent etre le plus possible externalises de la page. La relation entre 
HTML, xHTML et CSS doit essentiellement se fonder sur les selecteurs CSS. Lutilisa- 
tion de l'attribut styl e des balises HTML et xHTML doit etre evitee au maximum lors de 
la definition de leurs styles. 

De la meme maniere, le code JavaScript doit etre le plus possible externalise des balises 
HTML et xHTML. 

Ainsi, le rattachement des traitements JavaScript aux balises HTML et xHTML doit etre 
localise au minimum dans les attributs relatifs aux evenements et utiliser au maximum le 
support des evenements par la technologie DOM. 

Ces approches permettent de bien separer les differents traitements et langages contenus 
dans les pages Web afin de faciliter leur maintenance et leur evolution. 

Structuration des traitements JavaScript 

Divers mecanismes peuvent etre mis en oeuvre afin de structurer les traitements des appli- 
cations JavaScript. lis s'appuient essentiellement sur les fonctions JavaScript, qui permettent 
notamment de mettre en oeuvre les concepts de la programmation orientee objet. 
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L'objectif est de modulariser les traitements dans des entites JavaScript afin d'eviter les 
duplications de code et de favoriser la reutilisation des traitements. 

La mise en oeuvre et 1' utilisation de bibliotheques JavaScript permettent d'utiliser diverses 
collections de fonctions pour une problematique donnee et d' adresser de maniere trans- 
parente les specificites des navigateurs. 

La plupart des bibliotheques graphiques offrent un ensemble de composants graphiques 
et d'effets prets a l'emploi ainsi qu'un cadre general afin de developper des applications 
Web avec JavaScript. 

Nous detaillons la mise en oeuvre de ces bonnes pratiques d'utilisation des technologies 
HTML, xHTML, CSS et JavaScript tout au long de la partie III de l'ouvrage. 

Nous abordons a la partie IV la mise en oeuvre de diverses bibliotheques JavaScript 
adressant les problematiques graphiques des pages Web. 



Conclusion 



JavaScript est un langage de script dont le noyau est standardise par la specification 
ECMA-262. Cette derniere decrit le langage ECMAScript, dont JavaScript peut etre 
considere comme un dialecte, au meme titre que JScript. Par abus de langage, JavaScript 
designe en fait tous ces dialectes. 

En tant que langage interprets, JavaScript permet notamment de mettre en oeuvre des 
scripts dans des pages Web. II offre ainsi la possibility d'interagir avec les differents 
langages et technologies utilises dans les pages Web. En recourant a la technologie DOM, 
il permet en outre de manipuler la structure en memoire des pages Web. 

Ce langage correspond veritablement a la cle de voute des applications Web 2.0, aux 
interfaces graphiques riches et interactives. 

Longtemps freine par les specificites des navigateurs, JavaScript peut desormais recourir 
a differentes bibliotheques afin d' adresser ces specificites. Les pages Web n'ont alors 
plus a les gerer directement. 

La mise en oeuvre des mecanismes relatifs a Ajax permet d'executer des requetes HTTP 
a partir de pages Web sans avoir a recharger completement leur interface graphique. Le 
langage JavaScript permet alors de realiser une requete HTTP dont la reponse est utilisee 
afin de ne mettre a jour qu'une partie de cette interface en se fondant sur la technologie DOM. 



Partie I 



Principes de base 
de JavaScript 



Cette partie se penche sur les fondations du langage JavaScript. Bien que simple, a 
premiere vue, ce langage recele des subtilites qu'il est important de connaitre. 

Toutes les bibliotheques que nous presentons dans la suite de l'ouvrage s'appuient sur 
les principes decrits dans cette partie, rendant les applications JavaScript a la fois 
robustes, evolutives, modulaires et maintenables. 

Le chapitre 2 traite des elements et mecanismes elementaires de JavaScript, qu'il est 
indispensable de maitriser afin de developper des applications JavaScript tirant partie 
de toutes les subtilites du langage. 

Au travers du chapitre 3, nous verrons que JavaScript permet de mettre en ceuvre la 
plupart des principes objet et de rendre ainsi les applications beaucoup plus modulaires 
et robustes. 

Le chapitre 4 s'interesse aux differentes techniques permettant de manipuler la structure 
d'un document DOM par l'intermediaire de JavaScript. 

Le chapitre 5 decrit la mise en ceuvre des techniques Ajax, qui permettent d'executer 
des requetes HTTP dans une page Web sans la recharger. Le chapitre detaille la mise en 
ceuvre de la classe XMLHttpRequest aussi bien que les contournements de ses limitations. 
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Ce chapitre a pour objectif de rappeler les mecanismes de base de JavaScript ainsi que la 
maniere de structurer les applications JavaScript. 

Nous aborderons d'abord l'execution des scripts JavaScript dans des pages HTML, puis 
la gestion des variables ainsi que leur typage et les structures de controle. Nous decrirons 
ensuite la facon d'utiliser les tableaux et les types de base. 

Nous verrons en fin de chapitre la maniere dont JavaScript met en oeuvre fonctions et closures 
et permet de gerer les exceptions. 

Execution de scripts JavaScript 

JavaScript n'etant pas un langage compile, il doit etre execute par le biais d'un interpre- 
teur, dont plusieurs sont disponibles gratuitement tandis que d'autres sont integres aux 
navigateurs Web. 

Puisque cet ouvrage est destine aux developpeurs d' applications Web, nous nous concentrons 
sur l'utilisation de JavaScript dans les navigateurs. 

Interpreteurs JavaScript 

Des interpreteurs JavaScript sont disponibles dans differents produits du marche. lis 
peuvent correspondre a des implementations proprietaries ou a des incorporations de 
moteurs d' interpretation externes. 

Comme nous l'avons souligne au chapitre precedent, ces navigateurs conservent quelques 
specificites relativement a certains aspects du langage, dont ils supportent par ailleurs des 
versions differentes. 
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Le tableau 2. 1 recapitule les differents interpreteurs presents dans les navigateurs Web 
ainsi que les versions de langage supportees. 



Tableau 2.1 Interpreteurs JavaScript des principaux navigateurs 



Navigateur et version 


Interpreter JavaScript 


Version de JavaScript supportee 


Internet Explorer 4.* 


Interpreter JScript 


JScript 3.0 


Internet Explorer 5.* 


Interpreter JScript 


JScript 5.0 


Internet Explorer 6.* 


Interpreter JScript 


JScript 6.0 


Konqueror 3.* 


Interpreter KJS 


JavaScript 1 .2 


Mozilla 0.8 et 0.9 


SpiderMonkey 


JavaScript 1 .5 


Mozilla 1.x 


SpiderMonkey 


JavaScript 1 .5 


Netscape 4." 


- 


JavaScript 1 .3 


Netscape 5.* 


SpiderMonkey 


JavaScript 1 .5 


Netscape 7* 


SpiderMonkey 


JavaScript 1 .5 


Opera 6.x 


Interpreter specifique 


ECMAScript (ECMA-262, version 3) 


Opera 7.x 


Interpreter specifique 


ECMAScript (ECMA-262, version 3) 


Opera 8.x 


Interpreter specifique 


ECMAScript (ECMA-262, version 3) 



Les interpreteurs de Mozilla, SpiderMonkey et Rhino sont disponibles aux adresses http:/ 
Iwww.mozilla.org/js/spidermonkey/et http://www.mozilla.org/rhino/. lis correspondent aux implemen- 
tations des interpreteurs JavaScript de Mozilla avec respectivement les langages C et 
Java. Contrairement a SpiderMonkey, Rhino n'est pas utilise dans les navigateurs Netscape 
et Mozilla, car il est ecrit en Java. 

L'interpreteur Rhino peut etre utilise pour tester des blocs de code grace a un interessant 
interpreteur en ligne de commande. Son utilisation se fonde sur une machine virtuelle Java. 

Le code suivant illustre 1' utilisation de Rhino en ligne de commande : 

$ Java org. mozill a. javascript. tools. shell .Main 

js> print('Ceci est un test'); 

Ceci est un test 

js> function test(parametre) { 

return 'Valeur du parametre : '+parametre) ; 
} 

js> print(testdO)); 
Valeur du parametre : 10 

Le code suivant illustre 1' utilisation de Rhino afin d'executer le code JavaScript contenu 
dans un fichier : 

k$ Java org. mozilla. javascript. tools. shell .Main test.js 10 
Valeur du parametre : 10 
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Le contenu du fichier JavaScript test.js reprend les commandes saisies precedemment 

function test(parametre) { 

return "Valeur du parametre : "+parametre; 
} 
print(test(arguments[0]) ) ; 



Utilisation de JavaScript dans un navigateur 

La facon d'utiliser un script JavaScript est identique pour tous les navigateurs. Elle consiste 
a utiliser la balise HTML generique script, avec l'attribut type specifiant le type de langage 
de script. Dans notre cas, la valeur de cet attribut doit etre text/ javascri pt. 

II est fortement conseille de placer la balise script a l'interieur de la balise head. Cette 
derniere etant evaluee avant le corps du document HTML materialise par la balise body, 
le code JavaScript est disponible avant la construction graphique de la page, celle-ci 
pouvant l'utiliser a cet effet si necessaire. Neanmoins, le developpeur peut inserer un 
bloc script n'importe ou dans la page HTML. 

Le code suivant illustre un squelette de page HTML integrant un script JavaScript : 

<html> 
<head> 
(...) 
<script type="text/javascript" (...)> 

(...) 
</script> 
</head> 
<body> 
(...) 
</body> 
</html> 

II existe deux manieres d'utiliser JavaScript dans une page Web : 

• Implementer directement des traitements JavaScript dans la page, comme dans le code 
suivant : 

<script type="text/javascript"> 

var test = "Ceci est un test"; 

alert(test) ; 
</script> 

Faire reference a une adresse contenant le code par 1' intermediate de l'attribut src de 
la balise script. Ainsi, aucun code n'est contenu dans cette derniere balise. Cette tech- 
nique permet de partager entre plusieurs pages HTML des traitements ou des fonctions 
JavaScript communes et de les mettre en cache au niveau du navigateur. Elle permet 
egalement d'appeler une ressource qui genere dynamiquement du code JavaScript cote 
serveur. Remarquons qu'elle est communement utilisee par certains frameworks Ajax, 
tel DWR dans le monde Java/J2EE. 
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Le code suivant illustre la facon de faire reference a une ressource JavaScript externe : 

|<script type="text/javascript" src="monScript. js"> 
</script> 

Le fichier monScript. js doit pouvoir etre resolu en tant qu'adresse valide et ne contient 
que du code JavaScript. 

Le code suivant illustre un contenu possible de ce fichier : 

Ivar test = "Ceci est un test"; 
alert(test) ; 

Afin de prendre en compte les navigateurs ne supportant pas JavaScript, l'utilisation de 
commentaires HTML est conseillee dans le bloc delimite par la balise script, comme 
dans le code suivant : 

<script type="text/javascript"> 

<!-- 

var test - "Ceci est un test"; 

alertCtest) ; 

// --> 
</script> 



Principes de base de JavaScript 

Cette section rappelle les principes de base de JavaScript, depuis les variables et le typage 
jusqu'aux methodes et tableaux, en passant par les operateurs et les structures de controle. 



Variables et typage 

JavaScript est un langage non type. Cela signifie que le type d'une variable est defini 
uniquement au moment de 1' execution. 

La mise en oeuvre d'une variable se realise par P intermediate du mot-cle var. L'interpreteur 
JavaScript a la responsabilite de creer la valeur du bon type en fonction de 1' initialisation 
ou de P affectation. 

Le langage n' impose pas P initialisation des variables au moment de leur creation et offre 
la possibilite d'en definir plusieurs en une seule instruction. 

Le code suivant illustre la mise en oeuvre de plusieurs variables : 

// Variable initialisee avec une chaine de caracteres 

var variablel = "mon texte d'initialisation" ; 

// Variable non initialisee 

var variable2; 

// Definition de plusieurs variables en une seule instruction 

var variable3 = 2, variable4 = "mon texte d'initialisation"; 

Le choix du nom des variables doit respecter les deux regies suivantes : le premier caractere 
ne peut etre qu'une lettre, un souligne (underscore) ou un dollar, et les caracteres suivants 
doivent etre des caracteres alphanumeriques, des soulignes (underscores) ou des dollars. 
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JavaScript permet de changer le type des variables au cours de l'execution, comme 
l'illustre le code suivant : 

Ivar variable = "mon texte d'initial isation" ; 
(...) 
variable = 2; 

Formes litterales 

En JavaScript, une forme litterale correspond a une expression du langage permettant 
d' initialiser une variable. 

Les formes litterales sont surtout utilisees afin de definir un nombre, une chaine de carac- 
teres, un objet JavaScript ou un tableau. Pour les deux derniers elements, cette represen- 
tation est decrite par JSON, un format generique de structuration des donnees indepen- 
dant de JavaScript. Nous reviendrons sur JSON au chapitre 3, relatif a la programmation 
objet avec JavaScript. 

Le code suivant illustre 1' initialisation de differentes variables en se fondant sur des formes 
litterales : 

//Forme litterale pour un nombre entier en base decimale 

var nombreEntier = 11; 

//Forme litterale pour un nombre reel 

var nombreReel = 11.435; 

//Forme litterale d'une chaine de caracteres 

var chaineCaracteres = "Une chaine de caracteres"; 

//Forme litterale d'un tableau normal 

var tableau = [ "Premier element", "Second element" ]; 

//Forme litterale d'un tableau associatif 

var tableauAssociatif ■ { "del" : "valeurl", "cle2" : "valeur2" }; 

Types primitifs et objets references 

JavaScript definit plusieurs types, qui peuvent etre classes en deux groupes : les types 
primitifs et les objets references. 

Les types primitifs correspondent a des donnees stockees directement dans la pile 
d'execution, ces types etant definis de maniere litterale directement a partir de valeurs. 

Le tableau 2.2 recapitule les types primitifs definis par JavaScript. 
Tableau 2.2 Types primitifs de JavaScript 

Type Description 

Bool ear, Type dont les valeurs possibles sont true et false. 

Null Type dont I'unique valeur possible est null. Une variable possede cette valeur afin de specifier qu'elle 

a bien ete initialisee mais qu'elle ne pointe sur aucun objet. 

Number Type qui represente un nombre. 

Stri ng Type qui represente une chaine de caracteres. 

Undefined Type dont I'unique valeur possible est undefined. Une variable definie possede cette valeur avant 
qu'elle soit initialisee. 
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L' utilisation du type Boolean se realise par 1' intermediate des mots-cle true et false, 
correspondant respectivement a vrai et faux, comme l'illustre le code suivant : 



var vrai = true; 
var faux = fal se; 



I 

L utilisation des types Number et String est detaillee a la section relative aux types de base. 

Les types primitifs sont geres de maniere particuliere puisqu'ils correspondent a des 
pseudo-objets. lis possedent ainsi des proprietes et des methodes. Nous reviendrons sur 
cet aspect dans la suite de ce chapitre. 

Les objets references correspondent a des references vers des zones de la memoire. lis 
sont stockes dans le tas (heap). Seules les references a ces valeurs sont stockees dans la 
pile d' execution (stack). Ce mecanisme permet d'utiliser deux variables pointant sur une 
meme adresse et done la meme instance. 

En JavaScript, tous les objets suivent ce principe, comme l'illustre le code suivant : 

var objetl = new ObjectO; 

var objet2 = objetl; 

// objetl et objet2 pointent sur la meme adresse 

Notons que les operateurs new et del ete permettent respectivement d'allouer et de desallouer 
de la memoire dans le tas. 

Determination du type 

La methode typeof permet de determiner le type d'une variable. Elle renvoie la valeur object 
dans le cas de variables par reference, et ce quel que soit le type de l'objet. 

Le code suivant presente la detection de types primitifs : 

var variablel; 

alertC type de variablel : "+(typeof variablel)); 

// variablel est de type undefined 

var variable2 = nul 1 ; 

alertt" type de variable2 : "+(typeof variable2)); 

// variable2 est de type object 

var variable3 = 12.3; 

alertC type de variable3 : "+(typeof variable3)); 

// variable3 est de type number 

var variable4 = "une chaine de caracteres"; 

alertC type de variable4 : "+(typeof variable4)); 

// variable4 est de type string 

var variable5 = true; 

alertC type de variable5 : "+(typeof variable5)); 

// variable5 est de type boolean 

Remarquons qu'une variable ayant la valeur null est de type object. Ce comportement 
s'explique par le fait que le mot-cle nul 1 permet de definir une variable par reference qui 
ne pointe pour le moment sur aucune valeur. 
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Nous detaillerons dans la suite du chapitre des techniques permettant de determiner de 
maniere plus subtile le type d'un objet, par l'intermediaire notamment de l'operateur 

instanceof. 

Conversion de types 

JavaScript fournit des methodes afin de convertir un type primitif en un autre. II supporte 
les conversions de types primitifs en chaines de caracteres et de chaines de caracteres en 
nombres entiers ou reels. 

Comme nous l'avons vu precedemment, les types primitifs correspondent a des pseudo- 
objets. lis peuvent posseder des methodes, dont la methode toStri ng, qui permet de retourner 
leur representation sous forme de chaines de caracteres. 

Le code suivant illustre l'utilisation de la methode toStri ng pour les types bool ean et number : 

var booleen = true; 

var variablel = booleen. toStringt ) ; 

// variablel contient la chaine de caractere « true » 

var nombreEntier = 10; 

var variable2 = nomEntier.toString( ) ; 

// variable2 contient la chaine de caractere « 10 » 

var nombreReel = 10.5; 

var variable2 = nombreReel .toStringt ) ; 

// variable2 contient la chaine de caractere « 10.5 » 

Dans le cas des nombres, la methode toStri ng peut etre utilisee avec un parametre pour 
specifier la representation du nombre souhaite. Par defaut, la base decimale est utilisee. II 
est cependant possible de specifier, par exemple, les valeurs 2 pour la base binaire et 16 
pour l'hexadecimale. 

Le code suivant decrit l'utilisation de cette methode : 

var nombreEntier = 15; 

var variablel = nombreEntier. toStringt ) ; 

// variablel contient la chaine de caractere « 10 » 

var variable2 = nombreEntier. toString(2) ; 

// variable2 contient la chaine de caractere « 1111 » 

var variable4 = nombreEntier. toString(16) ; 

// variable4 contient la chaine de caractere « f » 

La creation de nombres a partir de chaines de caracteres se realise par l'intermediaire des 
methodes parselnt et parseFloat. Ces dernieres prennent en parametres des chaines de 
caracteres representant des nombres. Comme precedemment, il est possible de specifier 
la base utilisee afin de realiser la conversion soit directement dans la chaine elle-meme, 
soit par l'intermediaire d'un parametre. 

Le code suivant illustre la creation d'un nombre entier a partir d'une chaine de caracteres : 

I var entierl = parselnt("15") ; 
// entierl contient le nombre 15 
var entier2 = parselntC'Oxf ") ; 
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III entier2 contient le nombre 15 
var entier3 = parselntC'f " , 16); 
// entier3 contient le nombre 15 

Le code suivant presente la creation d'un nombre reel a partir d'une chaine de caracteres : 

I var reel = parseFloat("15.5" ) ; 
// reel contient le nombre reel 15,5 

Dans le cas ou les fonctions ne peuvent construire un nombre a partir d'une chaine, elles 
renvoient la valeur NaN. 



NaN (Not a Number) 

Cette valeur correspond a un nombre dont la valeur est incorrecte. Elle se rencontre le plus souvent lors 
des conversions de types. 



Operateurs 



Le langage JavaScript fournit differents types d'operateurs utilisables directement dans 
les applications. 

Le tableau 2.3 recapitule les types d'operateurs supportes par JavaScript. 

Tableau 2.3 Types d'operateurs de JavaScript 

Type Description 

Affectation Permet d'affecter une valeur ou une reference a une variable. L'unique operateur de ce type est =. L'ope- 

rateur d'affectation peut etre combine a ceux de calcul afin de realiser des calculs sur I'affectation. Par 
exemple, I'expression « valeur += 10 » correspond a « valeur = valeur + 10 ». 

Calcul Permet de realiser les calculs de base sur les nombres. 

Comparaison Permet de realiser des comparaisons entre differentes variables. 

Concatenation Permet de concatener deux chaines de caracteres. L'unique operateur de ce type est +. 

Conditionnel Permet d'initialiser la valeur d'une variable en se fondant sur une condition. 

Egalite Permet de determiner si differentes variables sont egales. 

Logique Permet de combiner differents operateurs de comparaison afin de realiser des conditions complexes. 

Manipulation de bits Permet de manipuler des variables contenant des bits. 

Unaire Mot-cle du langage se fondant sur un seul element. 



Nous detaillons dans les sections suivantes les specificites de ces differents types 
d'operateurs. Nous n'etudions pas dans le contexte de cet ouvrage les operateurs de 
manipulation de bits. 

Operateurs unaires 

Les operateurs unaires correspondent a des mots-cles ou symboles du langage qui se 
fondent sur un seul element. C'est le cas de typeof , detaille precedemment, qui determine 
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le type d'une variable, et de new, delete et instanceof, abordes au chapitre suivant, qui 
permettent respectivement de creer et liberer la memoire allouee pour un objet ainsi que 
de determiner finement son type. 

L'operateur void permet de retourner la valeur undefined pour n'importe quelle expression. 
Le code suivant en illustre l'utilisation : 

function uneFonction( ) { 

return "ma valeur de retour"; 
} 

var uneVariable - void(uneFonction( ) ) ; 
// uneVariable contient « undefined » 

Les operate urs ++ et -- permettent respectivement d'incrementer et de decrementer des 
nombres en les prefixant ou les suffixant. La position de l'operateur par rapport au nombre 
permet de determiner le moment ou est affectee la variable sur laquelle il porte. 

Le code suivant illustre ce mecanisme : 

var unNombre = 10; 

var unAutreNombre = unNombre++ ; 

// unAutreNombre vaut 10 et unNombre vaut 11 

unAutreNombre = ++unNombre; 

// unAutreNombre vaut 12 et unNombre vaut 12 

Les operateurs + et - permettent de convertir une chaine de caracteres en nombre de la 
meme facon que la methode parse Int. Contrairement a l'operateur +, - change en plus le 
signe du nombre. 

Le code suivant illustre la mise en oeuvre des operateurs + et - : 

I var chaine = "10"; // chaine est de type string 
var nombre = +chaine; // nombre est de type number 
var autreNombre = -chaine; // autreNombre est de type number et 1 'oppose de nombre 

Operateurs d'egalite 

II existe deux operateurs de ce type. Le premier, dont le symbole est == , permet de realiser 
une comparaison entre deux variables. La comparaison peut se realiser aussi bien au 
niveau des valeurs pour les types primitifs qu'au niveau des references pour les objets. 

Notons que ce type de comparaison permet de comparer deux variables de types differents. 
Une conversion est realisee a cet effet. Si cette derniere echoue, JavaScript considere les 
deux variables comme differentes. 

Ce langage possede egalement un operateur d'egalite stride, dont le symbole est ===. II 
est equivalent a l'operateur precedent, mais, contrairement a ce dernier, il ne realise pas 
de conversion de type. Ainsi, deux variables de types differents ne sont jamais egales 
avec cet operateur. 
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Operateurs de comparaison 

Ce type d'operateur comprend quatre operateurs. Le premier et le second, dont les 
symboles sont > et <, renvoient respectivement a des conditions de superiorite et d'infe- 
riorite strictes. Les deux derniers, dont les symboles sont >= et <=, sont identiques aux 
precedentes si ce n'est qu'elles permettent l'egalite. 

Ces operateurs peuvent s'appliquer aussi bien a des nombres qu'a des chaines de caracteres. 
Dans ce dernier cas, les comparaisons se fondent sur les codes des caracteres. Le code 
suivant illustre la mise en ceuvre de ces operateurs : 

Ivar unTest = 10 < 12; // unTest contient true 
var unAutreTest = "Mon test" > "un autre test"; //unAutreTest contient false 

La derniere condition du code ci-dessus renvoie f al se puisque le code du caractere « M » 
vaut 77 tandis que celui de « u » vaut 117. Dans le cas de la comparaison de chaines de 
caracteres, il convient de faire attention a la casse. 

La realisation des tests entre des nombres et des chaines de caracteres est egalement 
possible. Dans ce cas, JavaScript tente de convertir ces dernieres en nombre afin de realiser 
le test. S'il n'y parvient pas, la comparaison s'effectue avec la valeur NaN et vaut alors par 
convention false. 

Le code suivant illustre ce cas d'utilisation : 

Ivar unTest = "11" < 10; // unTest contient false 
var unAutreTest = "chaine" < 10; // unAutreTest contient false 

Notons que ce type d'operateur peut etre utilise dans les structures de controle condition- 
nelles et de boucle. 

Operateurs de calcul 

Les operateurs de calcul permettent de realiser les calculs elementaires entre nombres. Le 
langage JavaScript en definit cinq. Les deux premiers, dont les symboles sont + et -, 
concernent l'addition et la soustraction. Les deux suivants, dont les symboles sont * et /, 
correspondent a la multiplication et a la division. Le symbole % permet de recuperer le 
reste de la division entiere d'un nombre par un autre (modulo). 

Le code suivant presente leur mise en ceuvre : 

var unNombre = 26; 

var unAutreNombre = 3; 

var uneOperation = unNombre * unAutreNombre; 

// uneOperation contient 78 

var uneAutreOperation = unNombre / unAutreNombre; 

// uneAutreOperation vaut 8,666666666666666 

var uneDerniereOperation = unNombre % 5; 

// uneDerniereOperation vaut 1 

JavaScript definit la valeur particuliere Inf i ni ty pour les nombres. Elle correspond a une valeur litterale 
positive representant un nombre infini. Avec la version 1 .2 de JavaScript, cette valeur est 
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accessible par l'intermediaire des proprietes POSITIVE_INFINITY et NEGATIVE^INFINITY de la 
classe Number. Avec la version 1.3, Infinity est rattache a l'objet Global de JavaScript. 

Ce nombre particulier est superieur a tous les nombres, y compris lui-meme. II est obtenu, 
par exemple, lors d'une division par zero. Une division par ce nombre donne le resultat 0. 

Operateurs logiques 

Ce type d' operateurs permet de combiner differents operateurs de comparaison afin de 
realiser des conditions complexes. II existe trois operateurs : ! , && et | | . 

L'operateur ! correspond a la negation. && correspond a l'operateur ET, qui realise des opera- 
tions logiques en se fondant sur deux operandes. II possede les comportements recapitules 
au tableau 2.4. 

Tableau 2.4 Comportements de l'operateur ET 



Operande 1 


Operande 2 


Resultat 


true 


true 


true 


false 


true 


false 


true 


false 


false 


false 


false 


false 



| correspond a l'operateur OU, qui realise des operations logiques en se fondant sur 
deux operandes. II met en oeuvre le comportement recapitule au tableau 2.5. 

Tableau 2.5 Comportements de l'operateur OU 



Operande 1 


Operande 2 


Resultat 


true 


true 


true 


false 


true 


true 


true 


false 


true 


false 


false 


false 



Le code suivant illustre la mise en oeuvre de ces operateurs en combinaison avec l'operateur 
de comparaison : 

Ivar unTest = 10 < 11 && 15 > 16; // unTest contient false 
var unAutreTest = 10 < 11 || 15 > 16; // unTest contient true 

Ce type d'operateur peut etre utilise dans les structures de controle conditionnelles et de 
boucle. 

Operateur conditionnel 

Cet operateur peut initialiser une variable dont la valeur se fonde sur le resultat d'une 
condition. Sa syntaxe s'appuie sur les caracteres ? et : afin de definir trois blocs. Le premier 
bloc correspond a la condition, le second a la valeur a utiliser lorsque la condition est 
verifiee et le troisieme a la valeur quand la condition ne Test pas. 
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Le code suivant illustre l'utilisation de cet operateur : 



var valeurCondition = (...); 
var maValeur = valeurCondition 
**est fausse"; 



"vrai"? "La condition est vraie": "la condition 



Structures de controle 

Le langage JavaScript definit plusieurs stractures de controle arin de realiser des condi- 
tions et des boucles et de mettre en ceuvre des renvois. 

Ces structures classiques sont presentes dans la plupart des langages de progr animation. 
Comme nous allons le voir, elles sont aisement utilisables. 

Conditions 

II existe deux types de structures de conditions. La premiere est fondee sur la combinai- 
son d' instructions if, el se if et el se. Son role est de verifier une condition et de realiser 
differents traitements en cas de validite ou non. II obeit a la syntaxe suivante : 

if( condition ) { 

(...) 
} else if( condition ) { 

(...) 
} else { 



(...) 



} 



II est possible d'utiliser autant de blocs else if que necessaire. Le code suivant en donne 
un exemple d'utilisation : 

var chaine = (...); 

if( chaine == "une chaine" ) { 

alertC'La variable chaine est egale a 'une chaine'"); 
} else if( chaine== "une autre chaine" ) { 

alertC'La variable chaine est egale a 'une autre chaine'"); 
} else { 

alertC'La variable chaine est differente de" 

+ " 'une chaine' et 'une autre chaine'"); 
} 

Le second type de structures permet de realiser la meme fonctionnalite que precedem- 
ment a l'aide de la combinaison d' instructions switch, case et default. Cela permet de 
mettre en oeuvre des traitements en fonction de la valeur d'une variable. II obeit a la 
syntaxe suivante : 

switch( variable ) { 
case valeur: 

(...) 

break; 
default: 



(...) 



} 
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II est possible d'utiliser autant de blocs case que necessaire. Le code suivant en donne un 
exemple d'utilisation : 

var chaine = (...); 
switcht chaine ) { 
case "une chaine" : 

alertC'La variable chaine est egale a 'une chaine'"); 
break; 
case "une autre chaine": 

alertC'La variable chaine est egale a 'une autre chaine'"); 
break; 
default: 

alertC'La variable chaine est differente de" 

+ " 'une chaine' et 'une autre chaine'"); 
} 

Boucles 

JavaScript definit quatre types de boucles, for, f or...i n, whi 1 e et do...whi 1 e. 

La premiere s'appuie sur le mot-cle for afin de specifier a la fois les traitements d'initia- 
lisation realises a l'entree de la boucle, la condition de sortie et les traitements a realiser 
apres chaque iteration. Tant que la condition de sortie est vraie, l'iteration continue. 

La syntaxe de la boucle for est la suivante : 

for( traitements d'initial isation ; condition de fin ; 
traitements a effectuer apres chaque iteration) { 
(...) 
} 

II est recommande de definir des variables locales dans les traitements d'initialisation 
afin de reduire leur portee a la boucle. Le code suivant en donne un exemple d'utilisation : 

Ifor( var cpt=0; cpt<10; cpt++ ) { 
alert( "Valeur du compteur: "+cpt); 

La boucle for...in est une variante de la precedente qui se sert du mot-cle for conjointe- 
ment avec le mot-cle in, ce dernier permettant de specifier la variable a utiliser. Cette 
boucle permet de parcourir tous les elements des tableaux indexes ou des objets, comme 
nous les verrons par la suite. Sa syntaxe est la suivante : 

for( variable in structure ) { 

(...) 
} 

Comme precedemment, il est recommande d'utiliser des variables locales dans la decla- 
ration de la boucle. Le code suivant en donne un exemple d'utilisation : 

var tableaulndexe = { 

"del": "valeurl", 

"cle2": "valeur2" 
}; 
for( var cle in tableau ) { 

alert( "Valeur pour la cle "+cle+": "+tableau[cle]) ; 
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La boucle whi 1 e permet de specifier la condition de fin. Aussi longtemps que cette condition 
est vraie, les traitements sont repetes. La syntaxe de cette boucle est la suivante : 



while( condition de fin ) 

(...) 
} 



Le code suivant en donne un exemple d' utilisation 



var nombre = 0; 
while( nombre < 10 ) 

nombre++; 
} 



La derniere boucle est une variante de la precedente, qui permet d'effectuer le bloc avant 
la premiere condition. La syntaxe de cette boucle est la suivante : 

I do { 
(...) 
} whilet condition de fin ); 

Le code suivant en donne un exemple d'utilisation : 

var nombre - 0; 
do { 

nombre++; 
} while( nombre 



10 ); 



Renvois 



JavaScript definit les mots-cle break et continue afin de modifier l'execution des boucles. 
Le premier offre la possibilite d'arreter l'iteration d'une boucle et de sortir de son bloc 
d'execution, et le second de forcer le passage a l'iteration suivante. Les traitements suivants 
de l'iteration courante ne sont alors pas effectues. 

Ces deux mots-cles supportent l'utilisation d'etiquettes afin de mettre en oeuvre des renvois 
de traitements. Cette approche est particulierement utile pour interrompre ou continuer 
des traitements contenus dans des boucles imbriquees. 

Le code suivant montre comment arreter l'iteration dans deux boucles imbriquees sur 
une condition : 

var compteurGlobal - 0; 
boucleExterne: 

fort var cptl=0; cptl<5; cptl++ ) { 
fort var cpt2=0; cpt2<5; cpt2++ ) { 
if( cptl==2 && cpt2==2 ) { 

break boucleExterne; 
} 

compteurGlobal++; 
} 
} 
// compteurGlobal vaut 12 
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Le code suivant illustre la continuation de l'iteration pour la boucle de plus haut niveau a 
partir de la boucle imbriquee : 

var compteurGlobal = 0; 
boucleExterne: 

for( var cptl-Oj cptl<5; cptl++ ) ( 
for( var cpt2=0; cpt2<5; cpt2++ ) { 
if( cptl==2 && cpt2==2 ) { 
continue boucleExterne; 
} 
compteurGlobal++; 



// compteurGlobal vaut 22 



Methodes de base 

Le langage JavaScript fournit des methodes de base pouvant etre appelees directement 
dans les scripts. Nous revenons a la section « Classes pre-instanciees » du chapitre suivant 
sur les mecanismes sous-jacents qui permettent d'executer ces methodes. 

Nous avons detaille precedemment les methodes dont le nom commence par parse, 
methodes permettant de convertir une chaine de caracteres en un type primitif. 

La methode eval permet d'interpreter le code JavaScript contenu dans une chaine de 
caracteres. Le code suivant donne un exemple d' utilisation de cette methode : 



var codeJavaScript = "var maVariable = 10; 
"function incrementer(parametre) 
eval (codeJavaScript) ; 
var retour ■ incrementer(maVariable) ; 
// retour contient la valeur 11 



return parametre+1; 



Utilisation de la methode eval 

Cette methode est utilisee pour mettre en oeuvre le chargement a la demande de modules dans certaines 
bibliotheques et evaluer des structures JSON dans le cadre de la technologie Ajax. Le format JSON est 
aborde au chapitre 3, relatif a la programmation objet. 

II convient cependant d'etre extremement prudent dans I'utilisation de cette methode, car elle peut intro- 
duce des failles de securite, telles que I'execution de code malicieux. Elle est en outre couteuse en temps 
d'execution. 



JavaScript propose un ensemble de methodes permettant de detecter le type et la validite 
de la variable passee en parametre. Ces methodes, dont le nom commence par is, s'averent 
tres utiles puisque le langage JavaScript n'est pas type. 



Le tableau 2.6 recapitule ces methodes de detection de types et de validite des variables. 
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Tableau 2.6 Methodes de detection de types et de validite des variables 



Methode 


Description 


isArray 


Determine si le parametre est un tableau. 


isBoolean 


Determine si le parametre est un booleen. 


is Empty 


Determine si un tableau est vide. 


isFinite 


Determine si le parametre correspond a un nombre fini. 


isFunction 


Determine si le parametre est une fonction. 


isNaN 


Determine si la valeur du parametre correspond a NaN (Not a Number). 


isNull 


Determine si le parametre est null. 


isNumber 


Determine si le parametre est un nombre. 


isObject 


Determine si le parametre est un objet. 


isString 


Determine si le parametre est une chaine de caracteres. 


isUndefined 


Determine si le parametre est indefini, c'est-a-dire une reference non initialisee. 



Le code suivant illustre la mise en oeuvre des plus utilisees de ces methodes : 

var tableau = [] ; 

alert(isEmpty(tableau) ) ; // Affiche true 
alertO'sFunction(tableau) ) ; // Affiche false 
var booleen = true; 

alert(isBoolean(booleen) ) ; // Affiche true 
var chaine = "Ceci est un test"; 
alert(isString(chaine) ) ; // Affiche true 

Les methodes escape et unescape offrent respectivement la possibilite d'encoder et de 
decoder des chaines arm qu'elles puissent etre utilisees dans des pages HTML. Le code 
suivant donne un exemple de leur utilisation : 

var chaine = "Ceci est une chaine de caractere!"; 

var chaineEncodee = escape(chaine) ; 

/* chaineEncodee contient « CeciS&20esa20une:&20cha%EEneS&20de220caract%E8re%21 » */ 

var chaineDecodee = unescape(chaineEncodee) ; 

// chaineDecodee contient la meme chose que la variable chaine 

Certaines methodes de base correspondent aux constructeurs des classes relatives aux 
types primitifs. Nous detaillons ces classes ainsi que leurs types primitifs correspondants 
a la section « Types de base » de ce chapitre, ainsi qu'a la section « Classes de base » du 
chapitre suivant. 



Tableaux 



Le langage JavaScript offre deux types de tableaux. Nous decrivons dans cette section leur 
creation par l'intermediaire de valeurs litterales. Nous verrons au chapitre suivant que les 
tableaux peuvent egalement etre geres par l'intermediaire de la classe Array. 
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Le premier type correspond a un tableau classique, gere par index. Le code suivant illustre 
la creation et l'utilisation de ce type de tableau : 

// Initialisation d'un tableau vide 

var tableaul = [] ; 

tableaul[0] = "Le premier element"; 

tableaul[l] = "Le seconde element"; 

// Initialisation d'un tableau avec des elements 

var tableau2 = ["Le premier element", "Le seconde element" ]; 

tableaul[2] = "Le troisieme element"; 

Le parcours d'un tableau de ce type se realise en s'appuyant sur les indices avec la boucle 
for, comme dans le code suivant : 

var tableau = [ "elementl" , "element2" ]; 

(...) 

for(var cpt=0 ; cpt<tableau. length ; cpt++) { 

alert( "Element pour 1 'index "+cpt+" : "+tableau[cpt] ) ; 
} 

Bien qu'il soit possible de manipuler les tableaux de ce type en utilisant les indices, 
cette approche peut vite devenir fastidieuse. Nous recommandons done plutot d'utiliser 
les methodes de manipulation des tableaux. Malgre le fait qu'elles soient rattachees a la 
classe Array, elles peuvent etre utilisees directement avec un tableau defini de maniere 
litterale. 

Le tableau 2.7 recapitule les methodes permettant de manipuler les tableaux en JavaScript. 



Tableau 2.7 Methodes de la classe Array permettant de manipuler les tableaux 

Description 

Concatene un tableau a un autre. 

Construit une chaine de caracteres a partir d'un tableau en utilisant un 
separateur. 

Supprime et retourne le dernier element d'un tableau. 

Ajoute des elements a la fin d'un tableau. 

Inverse I'ordre des elements d'un tableau. 

Retourne le premier element et le supprime du tableau. Decale vers la gauche 
tous ses elements. 

Retourne une partie du tableau en fonction d'indices de debut et de fin. 

Trie les elements d'un tableau. Par defaut, le tri s'effectue par ordre alpha- 
betique. Une fonction de tri peut neanmoins etre passee en parametre afin 
de specifier la strategie de tri. 

Permet d'inserer, de supprimer ou de remplacer des elements d'un tableau. 

Convertit un tableau en une chaine de caracteres. 

Permet d'ajouter un element au debut d'un tableau et de decaler tous ses 
elements vers la droite. 



Methode 


Parametre 


concat 


Tableau a ajouter 


join 


Separateur 


pop 


push 


Element a ajouter 


reverse 


shift 


si ice 


Indices de debut et de fin 


sort 


Rien ou une fonction de tri 


splice 


Indices de debut et de fin et even 
tuellement elements a ajouter 


toString 


unshift 


Elements a ajouter 
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Nous allons detailler les principales methodes de manipulation des tableaux. 

La methode concat ajoute un tableau a la fin d'un autre, comme dans le code suivant : 

var tableau = [ "elementl", "element2" ]; 

var tableauAAjouter = [ "element3" , "element4" ]; 

//Retourne un tableau correspondant a la concatenation des deux 

var tableauResultat = tableau. concat(tableauAAjouter) ; 

La methode join permet de calculer une chaine de caracteres a partir d'un tableau. Elle 
utilise le separateur fourni en parametre afin de separer les differents elements du tableau 
dans la chaine. Le code suivant donne un exemple d' utilisation de cette methode : 

var tableau = [ "elementl", "element2", "element3", "element4" ]; 

var chaine - tableau. joint" ,") ; 

//chaine contient « elementl , el ement2, el ement3, el ement4 » 

La methode reverse inverse simplement l'ordre des elements d'un tableau, comme dans 
le code suivant : 

ivar tableau = [ "elementl", "element2", "element3", "element4" ]; 
var resultat = tableau. reverse( ) ; 
/*resultat correspond au tableau [ "element4", "element3", "element2", "elementl" ] */ 

La methode slice permet l'extraction d'une sous-partie d'un tableau en se fondant sur 
des indices de debut et de fin. Ce dernier peut cependant etre omis. Dans ce cas, sa valeur 
correspond a l'indice de fin de tableau. L' element correspondant a l'indice de fin n'est 
pas pris en compte dans le sous-tableau. Le code suivant donne un exemple d'utilisation 
de cette methode : 

var tableau = [ "elementl", "element2", "element3", "element4" ]; 

var resultat = tableau. sliced, 3) ; 

/*resultat correspond au tableau [ "element2", "element3" ] */ 

La methode sort trie les elements d'un tableau, comme dans le code suivant : 

var tableau = [ "trois", "quatre", "cinq", "six" ]; 



var resultat = tableau. sort( ) ; 

/*resultat correspond au tableau [ "cinq", "quatre", 



"trois" ] */ 



La methode sort peut egalement prendre en parametre une fonction de tri. Cette derniere 
prend deux parametres afin de realiser la comparaison. Le code suivant donne un exemple 
de mise en oeuvre de ce mecanisme : 

var tableau = [ "10", "11", "9", "8" ]; 
function fonctionDeTri (elementl, element2) { 

return elementl-element2; 
} 

var resultat = tableau. sortdonctionDeTri ) ; 
/* result correspond au tableau [ "8", "9", "10", "11" ] */ 
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La methode splice permet l'insertion et la suppression d'elements d'un tableau en une 
seule operation. Le premier parametre specifie l'indice a partir duquel sont realisees les 
operations, et le second le nombre d'elements supprimes du tableau. Les parametres suivants 
sont optionnels et correspondent aux elements ajoutes. 

Cette methode modifie le tableau sur lequel elle est appliquee et renvoie alors un tableau 
contenant les elements supprimes. Le code suivant donne un exemple d'utilisation de 
cette methode : 

var tableau = [ "el emeriti " , "element2", "element3", "element4" ]; 

//Rempl acement de deux elements dans le tableau 

var tableauResul tat = tableau. spliced, 2, "nouveau element2" , "nouveau element3"); 
/* tableauResul tat est equivalent a [ "elementl", "nouveau element2", 
^"nouveau element3", "element4" ] */ 
//Suppression des deux elements ajoutes precedemment 
tableauResul tat - tableau, spliced, 2) ; 
// tableauResul tat est equivalent a [ "elementl", "element4" ] 

Certaines des methodes recapitulees au tableau 2.7 permettent de mettre facilement en 
oeuvre des structures de donnees. Les methodes shift et push permettent la gestion d'un 
tableau sous forme de queue de type FIFO (First In, First Out). Cette structure correspond 
a une file d'attente dont le premier element qui lui est ajoute est le premier a en sortir. 
Le code suivant illustre la mise en oeuvre de cette structure de donnees : 

var queue = [] ; 

//Ajout d'elements a la queue 

pile. push ("elementl") ; 

pile.push("element2") ; 

//Recuperation du premier element de la queue 

var elementQueue = pile.shiftt ) ; 

//elementQueue contient la valeur « elementl » 

Les methodes push et pop permettent la gestion d'un tableau sous forme de pile ou de 
queue LIFO (Last In, First Out). Cette structure correspond a une pile dans laquelle le 
dernier element qui lui est ajoute est le premier a en sortir. La premiere ajoute un ou 
plusieurs elements au sommet de la pile, tandis que la seconde retourne et supprime 
1' element du sommet de la pile. Le code suivant donne un exemple de mise en oeuvre de 
cette structure de donnees : 

var pile = [] ; 

//Ajout d'elements a la pile 

pile. push ("elementl") ; 

pile. push( "element2") ; 

//Recuperation du premier element de la pile 

var elementPile - pile.popO; 

//elementPile contient la valeur « element2 » 
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JavaScript fournit en outre un tableau associatif, fonde sur des identifiants d'elements. Le 
code suivant illustre la creation et 1' utilisation d'un tel tableau par cle : 

// Initialisation d'un tableau vide 

var tableaul = {} ; 

tableaul["clel"]= "Le premier element"; 

tableaul["cle2"]= "Le second element"; 

// Initialisation d'un tableau avec des elements 

var tableau2 = { 

"clel": "Le premier element", 

"cle2": "Le second element" 
}; 
tableau2["cle3"] = "Le troisieme element"; 

Le parcours d'un tableau de ce type se realise en utilisant la boucle dediee f or...i n, comme 
dans le code suivant : 

var tableau = { 

"clel": "valeurl", 

"cle2": "valeur2" 
}; 

(...) 
for(var cle in tableau) { 

alertC'Element pour la cle "+cle+" 
} 



"+ tableau[cle] ) ; 



Nous verrons au chapitre suivant que JavaScript permet egalement de mettre en oeuvre 
les tableaux par 1' intermediate de la classe Array et de combiner Tutilisation de la forme 
litterale et de la classe Array. Nous verrons en outre que JavaScript considere les tableaux 
associatifs comme des objets. 



Types de base 



Le langage JavaScript offre differents mecanismes pour utiliser des elements courants 
tels que les chaines de caracteres, les nombres et les dates. 

JavaScript definit pour cela des classes correspondant aux types primitifs. Bien que nous 
n'ayons pas encore aborde la programmation orientee objet avec JavaScript, nous detaillons 
dans cette section aussi bien les types primitifs que leurs classes correspondantes, ces 
dernieres enrobant un type primitif en tant que valeur interne. 

La frontiere est etroite entre les types primitifs et les classes correspondantes puisque les 
premiers correspondent a des pseudo-objets. II est ainsi possible d' utiliser les methodes 
des classes sur les types primitifs, comme l'illustre le code suivant avec les chaines de 
caracteres : 

var chainel = "ma chaine de caracteres"; 

var chaine2 = chainel. concatC et une autre chaine de caracteres"); 
/* chaine2 contient la chaine de caracteres « ma chaine de caracteres et une autre 
*»chaine de caracteres » */ 
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Manipulation des chaines 

JavaScript gere les chaines de caracteres de maniere similaire a d'autres langages tels que 
Java. Ces dernieres peuvent cependant etre definies litteralement, aussi bien avec des 
guillemets ou des apostrophes, comme dans le code suivant : 

Ivar chainel = "ma chaine de caractere"; 
var chaine2 = 'mon autre chaine de caractere'; 

Le langage JavaScript introduit la classe String correspondante. Le code suivant illustre 
la facon de creer une chaine de caracteres par l'intermediaire de cette classe : 

var chainel = new StringC'ma chaine de caractere"); 

Le tableau 2.8 recapitule les methodes relatives a la manipulation de chaines. Bien que la 
classe Stri ng possede des methodes relatives au HTML, nous ne les detaillons pas ici. 

Tableau 2.8 Methodes de manipulation de chaines de la classe String 



Methode 


Parametre 


Description 


charAt 


Index du caractere dans la chaine 


Retourne le caractere localise a I'index specifie en parametre. 


charCodeAt 


Index du caractere dans la chaine 


Retourne le code du caractere localise a I'index specifie en parametre. 


concat 


Chaine a concatener 


Concatene la chaine en parametres a la chaine courante. 


fromCharCode 


Chaine de caracteres Unicode 


Cree une chaine de caracteres en utilisant une sequence Unicode. 


indexOf 


Chaine de caracteres 


Recherche la premiere occurrence de la chaine passee en parametre 
et retourne I'index de cette premiere occurrence. 


lastlndexOf 


Chaine de caracteres 


Recherche la derniere occurrence de la chaine passee en parametre 
et retourne I'index de cette derniere occurrence. 


match 


Expression reguliere 


Determine si la chaine de caracteres comporte une ou plusieurs cor- 
respondences avec I'expression reguliere specifiee. 


replace 


Expression reguliere ou chaine de 
caracteres a remplacer puis chaine 
de remplacement 


Remplace un bloc de caracteres par un autre dans une chaine de 
caracteres. 


search 


Expression reguliere de recherche 


Recherche I'indice de la premiere occurrence correspondant a 
I'expression reguliere specifiee. 



si ice 



Index dans la chaine de caracteres 



Retourne une sous-chaine de caracteres en commengant a I'index 
specifie en parametre et en finissant a la fin de la chaine initiale si la 
methode ne comporte qu'un seul parametre. Dans le cas contraire, 
elle se termine a I'index specifie par le second parametre. 



split 


Delimiteur 


Permet de decouper une chaine de caracteres en sous-chaines en se 
fondant sur un delimiteur. 


substr 


Index de debut et de fin 


Methode identique a la methode slice 


substring 


Index de debut et de fin 


Methode identique a la precedents 


toLowerCase 


- 


Convertit la chaine de caracteres en minuscules. 


toString 


- 


Retourne la chaine de caractere interne sous forme de chaines de 
caracteres. 


toUpperCase 


- 


Convertit la chaine de caracteres en majuscules. 


val ueOf 


■ 


Retourne la valeur primitive de I'objet. Est equivalente a la methode 
toString. 
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Attardons-nous maintenant sur les principales methodes de manipulation des chaines de 
caracteres. 

Tout d'abord, la methode concat permet de retourner la concatenation de deux chaines de 
caracteres. Le code suivant illustre l'utilisation de cette methode : 

var uneChaine = "line chaine."; 

var uneAutreChaine - "line autre chaine."; 

var resultat = uneChaine. concat(uneAutreChaine) ; 

// resultat contient « une chaine. line autre chaine. » 

Les methodes indexOf et lastlndexOf determinent l'indice de premiere occurrence d'un 
caractere dans une chaine de caracteres en la parcourant respectivement depuis son debut 
et depuis sa fin. Le code suivant illustre sa mise en oeuvre : 

var uneChaine = "Le debut de la chaine. Sa fin."; 
var indicePointDebut = uneChaine. indexOf (".") ; 
//La valeur de indicePointDebut est 10 
var indicePointFin - uneChaine. lastlndexOf (".") ; 
//La valeur de indicePointFin est 21 

La methode repl ace remplace la premiere occurrence d'une chaine de caracteres par une 
autre, comme dans le code suivant : 

var uneChaine = "Le debut de la chaine. Sa fin."; 

var resultat = uneChaine. replacet" . "," ; "); 
//resultat contient « Le debut de la chaine ; Sa fin. » 

Cette methode peut etre egalement utilisee avec une expression reguliere en parametre 
arm de determiner la chaine de caracteres a remplacer. Nous detaillons cette utilisation a 
la section relative aux expressions regulieres. 

La methode split permet de couper une chaine de caracteres en plusieurs sous-chaines 
en se fondant sur un delimiteur. Elle retourne un tableau les contenant, comme dans le 
code suivant : 

var uneChaine = "Le debut de la chaine. Sa fin."; 

var resultat = uneChaine. spl it ("."); 

/* resultat est un tableau contenant les elements « Le debut de la chaine », 
*»« Sa fin » et « » */ 

Les methodes substring et slice extraient une sous-chaine de caracteres d'une autre. 
Elles se fondent sur des indices dans la chaine pour delimiter la sous-chaine. Le code 
suivant illustre la mise en ceuvre de la methode substring : 

I var uneChaine = "Le debut de la chaine. Sa fin."; 
var sousChaine = uneChaine. substring(15, 21) ; 
// sousChaine contient la chaine « chaine » 
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Les methodes toLowerCase et toUpperCase permettent respectivement de mettre une chaine 
en majuscules et en minuscules, comme l'illustre le code suivant : 

var uneChaine = "Une chaine"; 
var chaineMajuscule = uneChaine. tollpperCase( ) ; 
// chaineMajuscule contient « UNE CHAINE » 
var chaineMinuscule = uneChaine. toLowerCaset ) ; 
// chaineMajuscule contient « une chaine » 

Les methodes match et search mettent en oeuvre des expressions regulieres. Nous les detaillons 
plus loin dans ce chapitre. 

Manipulation des nombres 

JavaScript ne definit pas plusieurs types pour gerer les nombres, a la difference de langa- 
ges tels que Java. Un nombre entier et un nombre reel sont tous deux de type Number. La 
differentiation se fait au niveau de leur initialisation. JavaScript fournit la classe corres- 
pondante Number. 

Le tableau 2.9 recapitule les methodes de cette classe pouvant etre appelees sur un nombre 
(les nombres sont considered comme des pseudo objets). 

Tableau 2.9 Methodes de la classe Number 



Methode 


Parametre 


Description 


toLocaleString 


- 


Convertit une chaine de caracteres en chaines de caracteres en se fondant sur 
des parametres regionaux. 


toSource 


- 


Retourne un objet litteral pour le nombre. 


toString 


Rien ou la base de repre- 
sentation du nombre 


Convertit un nombre en chaine de caracteres en se fondant eventuellement sur 
un parametre representant la base. S'il est omis, la base decimale est utilisee. 


val ueOf 


- 


Retourne la valeur primitive correspondant a I'objet. 



La methode toLocaleString permet de retourner une representation du nombre sous 
forme de chaines de caracteres en se fondant sur les parametres regionaux. 

La methode toStri ng offre la possibilite de retourner une representation du nombre sous 
forme de chaines de caracteres. Elle n'utilise pas les parametres regionaux dans le forma- 
tage et prend en parametre la base de representation du nombre. Si ce parametre est omis, 
la methode retourne sa representation decimale. Le code suivant illustre l'utilisation de 
cette methode : 

var nombre = 11; 

var chaineDecimale = nombre. toString( ) ; 

/* chaineDecimale contient la chaine de caractere « 11 » */ 

var chaineHexdecimale = nombre. toString(16) ; 

/* chaineDecimale contient la chaine de caractere « b » */ 
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Manipulation des dates 

JavaScript definit les dates uniquement en tant que classe par 1' intermediate de la classe 
Date, laquelle comporte un grand nombre de methodes. 

Le tableau 2.10 recapitule ses methodes principales en omettant celles relatives au systeme 
horaire universel (UTC). Toutes les methodes commencant par get se fondent sur les 
parametres regionaux. 

Tableau 2.10 Principales methodes de la classe Date 

Description 

Retourne le jour du mois de la date courante. 

Retourne le jour de la semaine de la date courante. 

Retourne I'annee de la date courante. 

Retourne les heures de I'heure courante. 

Retourne les millisecondes de I'heure courante. 

Retourne les minutes de I'heure courante. 

Retourne le mois de la date courante. 

Retourne les secondes de I'heure courante. 

Determine le nombre representant la date en millisecondes. 

Determine le decalage horaire par rapport a I'heure GMT. 

Retourne I'annee de la date courante sur deux caracteres pour les annees 
precedant 2000. 

Toutes les methodes getXXX ont des methodes setXXX correspondantes. 

Retourne la date GMT sous forme de chaines de caracteres. 

Retourne la date sous forme de chaines de caracteres en utilisant les para- 
metres regionaux. 

Retourne un objet litteral representant la date. 

Retourne la date sous forme de chaine de caracteres. 

Retourne la date sous forme de nombre. 



Methods 


Parametre 


getDate 


getDay 


- 


getFul 1 Year 


- 


getHours 


- 


getMi 1 1 iseconds 


- 


getMinutes 


- 


getMonth 


- 


getSeconds 


- 


getTime 


- 


getTimezoneOffset 


- 


getYear 


- 


setXXX 


Parametre correspon 
dant a la propriete 


toGMTString 


- 


toLocaleString 


- 


toSource 


- 


toString 


- 


val ueOf 


- 



La creation d'une date se realise par le biais du constructeur de la classe Date. Ce dernier 
peut ne prendre aucun parametre. Dans ce cas, l'instance creee correspond a la date 
courante. Une instance de la classe Date peut egalement etre initialisee a partir d'une date 
exprimee en millisecondes ou a partir des informations relatives a I'annee, au mois, au 
jour ainsi qu'aux heures, aux minutes, aux secondes et aux millisecondes. 

Le code suivant illustre ces differentes facons de creer une date : 

Ivar dateCourante = new DateO; 
// dateCourante contient la date courante 
var uneDate = new Date(dateCourante.getTime( )) ; 
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III uneDate est initial n" see avec la date courante exprimee en secondes 
var uneAutreDate = new Date ( 1996 , 10 , 20 , 12 , 5 , ) ; 
// uneAutreDate correspond au 20 octobre 1996 a 12 heures et 5 minutes 

Une fois la date creee ou recuperee, il est possible d' avoir acces a ses differentes infor- 
mations et de les modifier, comme dans le code suivant : 

var uneDate = new DateO; 
var annee = uneDate. getFul lYeart ) ; 
var mois = uneDate. getMonth( ) ; 
var jour = uneDate. getDate( ) ; 
uneDate. setMonth(7) ; 

La methode toString permet de retourner la representation sous forme de chaines de 
caracteres d'une date. Cette representation n'est pas totalement identique suivant les 
navigateurs, comme l'illustre le code suivant : 

Var date = new Date( ) ; 

Var chaineDate = date.toStringt ) ; 

/* avec Internet Explorer, chaineDate contient « Mon Nov 20 12:05:00 UTC+0100 2006 » */ 

/* avec Firefox, chaineDate contient « Mon Nov 20 2006 12:05:00 GMT+0100 » */ 



Specificites des navigateurs pour les dates 

Les navigateurs Internet Explorer et Firefox ne se comportent pas de la meme maniere a regard des 
methodes getYear et toStri ng. Par exemple, avec la methode getYear pour une date dont I'annee est 
2006, le premier renvoie 6 et le second 106. Les navigateurs ont egalement des comportements differents 
quant a la representation des dates sous forme de chaines de caracteres. 



JavaScript ne fournit pas en natif de fonctionnalites permettant de convertir des dates en 
chaines de caracteres et reciproquement. II faut done recourir a une bibliotheque pour 
realiser ces traitements. 



Expressions regulieres 

Le langage JavaScript propose differentes fonctionnalites arm de mettre en ceuvre les 
expressions regulieres. 

Une expression reguliere correspond a une notation compacte et puissante qui decrit de 
maniere concise un ensemble de chaines de caracteres. Elle peut notamment etre appli- 
quee a une chaine de caracteres afin de determiner si elle correspond a des criteres parti- 
culiers. Elle obeit a une syntaxe particuliere et interprete specifiquement differents 
symboles. La syntaxe du support integre des expressions regulieres par JavaScript est 
empruntee au langage Perl. 

Forme litterale 

JavaScript permet de definir une expression reguliere sous forme litterale par l'intermediaire 
du symbole /. Cette definition comporte deux parties : l'expression proprement dite et les 
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proprietes relatives a son application. Aucune apostrophe ni aucun guillemet ne sont 
necessaires avec la forme litterale. 

II existe deux proprietes relatives a 1' application des expressions regulieres : 

• La valeur g, qui specifie que toutes les occurrences dans la chaine doivent etre utilisees. 
Si elle n'est pas specifiee, seule la premiere occurrence est utilisee. 

• La valeur i , qui specifie que la recherche n'est pas sensible a la casse. 

Le code suivant illustre la mise en ceuvre d'une expression reguliere fondee sur la forme 
litterale : 

var chaine - "Ceci est un test"; 

var expression = /test/gi ; 

var chaineCorrespond = expression. testCchaine) ; 

/* chaineCorrespond contient true puisque la chaine correspond a 1 'expression reguliere */ 

Nous verrons au chapitre 3 que la classe Reg Exp fournie par JavaScript permet de definir 
une expression reguliere de maniere similaire. 

Syntaxe 

Avant de decrire la syntaxe des expressions regulieres JavaScript, nous recapitulons au 
tableau 2.1 1 les symboles particuliers utilisables pour leur ecriture. 

Tableau 2.1 1 Symboles des expressions regulieres JavaScript 

Symbole Description 

$ Indique que I'expression se situe en fin de chaine de caracteres. 

( ) Marque un endroit de la chaine en se fondant sur une expression reguliere. Ce marquage peut etre realise neuf 

foisdans une expression reguliere. L'acces a I'element se fait ensuite directement par RegExp.$l. Permet egale- 
ment de delimiter un groupe de caracteres dans I'expression reguliere. 

* Designe un ensemble d'au moins un signe quelconque. 

Designe un signe quelconque. 

[] Specifie un ensemble de caracteres sous la forme d'une plage de caracteres. On specifie que le caractere peut 

etre un de ceux compris entre a et f, par exemple. 

\b Designe I'extremite d'un mot. 

\B Designe I'oppose du symbole precedent, et done tout sauf I'extremite d'un mot. 

\d Designe un chiffre quelconque. 

\D Designe I'oppose du symbole precedent, et done un signe autre qu'un chiffre . 

\f Correspond a un signe de saut de page. 

\n Correspond a un signe de saut de ligne, ou LF (Line Feed). 

\r Correspond a un signe de retour chariot, ou CR (Carriage Return). 

\s Correspond a n'importe quelle espace : espace, saut de page, saut de ligne, retour chariot et tabulation. 

\ S Designe I'oppose du symbole precedent, et done tout sauf une espace . 
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Tableau 2.1 1 Symboles des expressions regulieres JavaScript (suite) 

Symbole Description 

\t Correspond a un signe de tabulation. 

\v Correspond a un signe de tabulation verticale. 

\w Designe tous les signes alphanumeriques, y compris le tiret. 

\W Designe I'oppose du symbole precedent, et done un signe autre qu'un signe alphan umerique ou un tiret. 

A Indique que I'expression se situe en debut de chaine de caracteres. Entre crochets, ce symbole correspond a 

la negation. 

{ } Specifie le nombre d'occurrences du bloc de caracteres qui le precede. 

| Designe I'une ou I'autre expression. 

+ Designe un ensemble de zero ou plusieurs signes quelconques. 

Le caractere d'echappement dans les expressions regulieres est \. II doit etre mis en oeuvre 
lorsque des caracteres du tableau 2.11 doivent etre utilises dans I'expression elle-meme. 
Notons qu'avec la classe RegExp le caractere d'echappement doit etre double. 

Le code suivant donne un exemple d' utilisation du caractere d'echappement : 

Ivar chaine = "Ceci est un test?"; 
var monExpression = /test\?/g; 
/* monExpression correspond au bloc « test? » dans la chaine de caracteres */ 

Tous ces symboles peuvent etre combines afin de mettre en oeuvre des expressions 
regulieres puissantes. 

La forme la plus simple d'expression reguliere consiste en une chaine de caracteres n'utilisant 
aucun symbole du tableau 2.1 1. Cette forme permet de rechercher les occurrences de cette 
chaine dans une autre chaine, comme dans le code suivant : 

Ivar chaine = "Ceci est une chaine de test"; 
var monExpression = /chaine/g; 
/* monExpression correspond au mot « chaine » dans la chaine de caracteres */ 

L utilisation des symboles [] permet de definir un ensemble de caracteres dans une expres- 
sion reguliere, comme dans le code suivant : 

Ivar chaine = "Ceci est une chaine de test"; 
var monExpression = /c[a-Z]*e/g; 
/* monExpression correspond au mot « chaine » dans la chaine de caracteres */ 

Lutilisation des symboles {} permet de determiner un ensemble precis d'occurrences de 
caracteres, comme dans le code suivant : 

Ivar chaine = "Ceci est une chaine de test"; 
var monExpression = /c[a-Z]{4}e/g; 
/* monExpression correspond au mot « chaine » dans la chaine de caracteres */ 
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Methodes utilisables 

Nous nous interessons dans cette section aux methodes utilisables avec les expressions 
regulieres. 

Puisqu'une expression reguliere sous forme litterale est considered comme un pseudo- 
objet, a l'instar des chaines de caracteres et des nombres, les methodes de la classe RegExp 
recapitulees au tableau 2.12 peuvent etre utilisees. 

Tableau 2.12 Methodes de la classe RegExp 



Methode 


Parametre 


Description 


exec 


Chaine de caracteres 


Retourne les occurrences correspondant a I'expression reguliere dans 
la chaine. 


test 


Chaine de caracteres 


Determine si des occurrences sont contenues dans la chaine de carac- 
teres en parametre pour I'expression reguliere. 



La methode test determine si des occurrences sont contenues dans la chaine de caracteres 
en parametre pour I'expression reguliere sur laquelle elle est appliquee. Le code suivant 
illustre son utilisation : 

var chaine = "Ceci est une chaine de test"; 

var expression = /test$/g; 

var retour - expression. test(chaine) ; 

// retour contient la valeur true 

chaine = "Ceci est une chaine de test."; 

retour = expression. test(chaine) ; 

// retour contient desormais la valeur false 

La methode exec retourne les occurrences correspondant a I'expression reguliere pour la 
chaine de caracteres passee en parametre. Si une seule occurrence est trouvee, le tableau 
de retour est converti automatiquement en chaine de caracteres. Le code suivant illustre 
son utilisation : 

var chaine - "Ceci est une chaine de test"; 

var expression = /test$/g; 

var sousChaines = expression. exec(chaine) ; 

// sousChaines est un tableau contenant un seul element, « test » 

Comme indique precedemment, les chaines de caracteres possedent trois methodes 
acceptant en parametre une expression reguliere : match, search et repl ace. 

La methode match retourne les differentes sous-chaines de caracteres correspondant a 
I'expression reguliere dans la chaine de caracteres initiale. Le code suivant illustre 1' utili- 
sation de cette methode : 

var chaine - "Ceci est une chaine de test"; 

var expression = /chaine| test/g; 

var sousChaines = chaine. match(expression) ; 

/* sousChaines est un tableau contenant les valeurs « chaine » et « test » */ 
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La methode search retourne la position de la premiere occurrence correspondant a 
l'expression reguliere. Elle s'utilise comme dans le code suivant : 

var chaine = "Ceci est une chaine de test"; 
var expression = /chaine| test/g; 
var position = chaine. match(expression) ; 
// position contient la valeur 13 

La methode repl ace permet de remplacer le premier element correspondant a l'expression 
reguliere specifiee. Le code suivant illustre son utilisation : 

var chaine = "Ceci est une chaine de test"; 

var expression = /une chaine de/g; 

var nouvelleChaine = chaine. replacetexpression, "un") ; 

// nouvelleChaine contient « Ceci est un test » 



Structuration des applications 

JavaScript propose differents elements de langage sur lesquels un developpeur peut se 
fonder afin de structurer ses applications. Ces elements permettent en outre de realiser 
des traitements de maniere plus elegante, mais aussi de modulariser ces traitements et de 
rendre les applications plus robustes. 

Fonctions 

Les fonctions represented le concept de base de la programmation JavaScript afin de 
modulariser les traitements. Elles possedent des specificites par rapport a des langages 
tels que Java ou C++. 

Nous verrons au chapitre suivant que les fonctions constituent la cle de voute du develop- 
pement objet en JavaScript. 

Le mot-cle function permet de mettre en oeuvre les fonctions selon la syntaxe suivante : 

I function nomDel_aFonction(parametrel, parametre2, ...) { 
//Code de la fonction 
J 
Remarquons que la definition de la fonction permet de determiner son nom ainsi que la 
liste de ses parametres, cette liste ne contenant que leurs noms. Aucune information relative 
a leur type n'est specifiee. De plus, le type de retour n'est pas specifie, meme si le code 
de la fonction comprend une clause return. 

Les parametres de la fonction sont visibles uniquement dans la methode. lis peuvent etre 
utilises pour realiser ses traitements. 

Comme dans la plupart des langages, une fonction est utilisee par le biais de son nom, 
suivi de parentheses. Ces dernieres permettent de delimiter la liste de ses parametres, comme 
dans le code suivant : 
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function test(parametrel , parametre2) { 
return parametrel+" - "+parametre2; 
} 

var retour - test ("pa rami" , "param2") ; 
//La variable retour contient la valeur: "paraml - param2" 

La valeur de retour, dans le cas ou la fonction ne renvoie pas d'element, est undefined. 



Fonction et variable 

JavaScript offre la possibility d'affecter une fonction a une ou plusieurs variables. La 
variable est alors de type function. L' affectation peut etre realisee a partir d'une fonction 
existante ou, au moment de la creation de la variable, a l'aide d'une fonction anonyme. 

Le code suivant illustre 1' affectation d'une fonction existante a une variable : 

function testtparametrel , parametre2) { 
return parametrel+" - "+parametre2; 
} 
var maFonction = test; 

Dans le cas d'une fonction anonyme, la syntaxe est la suivante : 



var maFonction = function(parametrel , parametre2, 

//Code de la fonction 
}; 



) { 



Le code suivant illustre la mise en ceuvre de ce mecanisme : 

I var maFonction = function (parametrel, parametre2) { 
return parametrel+" - "+parametre2; 

Lors de l'appel de la fonction, le nom de la variable est utilise. Dans le cas de 1' affectation 
d'une fonction existante, le nom de la variable est equivalent au nom de la fonction, comme 
dans le code suivant : 

function testtparametrel, parametre2) { 
return parametrel+" - "+parametre2; 
} 

var maFonction = test; 

var retour = maFonction( "paraml" ,"param2" ) ; 
//Execute le code de la methode testl 

Le code suivant illustre la mise en oeuvre d'une fonction anonyme : 

var maFonction = function(parametrel , parametre2) ( 

return parametrel+" - "+parametre2; 
} 

var retour - maFonction( "paraml" ,"param2" ) ; 
//Execute le code de la methode anonyme 



Fondements de JavaScript 



Chapitre 2 

Identification de fonction 

Le concept de signature permet d' identifier completement une fonction puisque la signa- 
ture englobe a la fois le nom de la fonction, les types de ses parametres et son type de 
retour. En cas d'utilisation d'une fonction sur un objet, sa visibilite est egalement prise en 
compte. Nous detaillons au chapitre suivant cette notion de visibilite. 

Le langage JavaScript n'utilise pas les signatures pour identifier les fonctions et se fonde 
uniquement sur leurs noms. Ainsi, deux fonctions globales ou d'un meme objet possedant 
le meme nom ne peuvent coexister avec ce langage. 

En fait, si deux fonctions ou deux methodes d'un meme objet possedant le meme nom exis- 
tent pour le meme objet, l'interpretateur JavaScript utilise toujours celle qui a ete definie en 
dernier, ignorant toutes les precedentes. Ce mode de fonctionnement peut etre perturbant au 
premier abord, mais JavaScript fournit un mecanisme qui contourne cette limitation. 

Le code suivant illustre ce mecanisme : 

function maFonctiontparametrel, parametre2) { 

return parametrel+" - "+parametre2; 
} 
function maFonctiontparametrel) { 

return parametrel; 
} 
var retour = maFonction( "paraml" , "param2"); 

Nous pourrions nous attendre a ce que le contenu de la variable retour soit la chaine de 
caracteres paraml - param2, alors que nous constatons que la variable contient la chaine 
de caracteres paraml. Laraison acelaestque la fonction ma Fonction appelee est la seconde, 
puisqu'elle a ete definie en dernier et est done la seule a etre prise en compte. 

Notons que JavaScript introduit la variable arguments dans le corps la fonction pour resoudre 
ce probleme. 

Gestion des arguments 

JavaScript met a disposition la liste des arguments passes a une fonction dans une varia- 
ble particuliere. Nommee arguments, cette variable est implicitement definie pour chaque 
fonction. Le developpeur peut done l'utiliser directement dans le code des fonctions. 

Cette fonctionnalite de JavaScript permet de supporter plusieurs signatures de methodes 
et ainsi de contourner le probleme souleve a la section precedente. En contrepartie, il faut 
gerer les differents parametres au debut de la fonction. 

Le code suivant illustre la facon de corriger le code de la section precedente pour suppor- 
ter differentes signatures de fonctions : 

function maFonctionO ( 

if( arguments. length == 1 ) { 

return arguments[0] ; 
} 
if( arguments. length == 2 ) { 

return arguments[0]+" - "+arguments[l] ; 
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var retour - maFonction( "paraml" , "param2"); 

//La valeur de la variable retour est « paraml - param2 » 

var retour = maFonction( "paraml" ) ; 

//La valeur de la variable retour est « paraml » 

Une fonction JavaScript est definie par l'intermediaire du mot-cle function, qui permet 
de specifier son nom ainsi que ses parametres. Comme le langage n'est pas type, ces 
derniers ne sont definis qu'avec leur nom. La declaration d'une fonction ne definit pas de 
retour, meme si elle en possede un. 

Le code suivant illustre la definition d'une fonction nommee test possedant deux para- 
metres, paraml et param2 : 

function testtparaml, param2) { 

(...) 

return "Ceci est une fonction - paraml i "+paraml; 
} 
var retour = test( "paraml" , "param2"); 

Une fonctionnalite interessante de JavaScript permet d'affecter une fonction a une variable. 
Cette derniere fait alors reference a la fonction. Le code suivant montre la facon d'affecter 
une fonction et d'utiliser ensuite la variable : 

var maFonction = function(paraml , param2) { 

(...) 

return "Ceci est une fonction - paraml : "+paraml; 
} 
maFonctionC'paraml" , "param2") ; 

II est de la sorte facile de personnaliser un algorithme avec une variable contenant une 
fonction, comme l'illustre le code suivant : 



var maFonction = function(paraml , param2) { 

(...) 

return "Ceci est une fonction - paraml : "+paraml; 
} 
function test(uneFonction) { 

var paraml="test" ; 

var param2="test" ; 

(...) 

return une Fonction (pa rami, pa ram2) ; 

(...) 
} 

var retour = test(maFonction) ; 
// retour contient « Ceci est une fonction - paraml : test » 

La fonction test prend en parametre une fonction. Cette derniere est utilisee arm 
d'implementer les traitements de la fonction test. 
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Notons qu'une fonction doit etre definie dans un script JavaScript avant d'etre utilisee, 
sous peine de generer une erreur. Dans les cas simples, ces problemes sont facilement 
identifiables, mais ce n'est pas forcement le cas avec les mecanismes d'importation de 
sources, plus ou moins complexes. 



Closures 

Une closure est une fonction JavaScript particuliere, qui utilise directement des variables 
definies en dehors de la portee de son code. Ce mecanisme est souvent utilise par des 
fonctions definies dans d'autres fonctions, comme l'illustre le code suivant : 

function uneFonction(parametre) { 

function uneClosure(unAutreParametre) { 
return "Les parametres sont: " 

+parametre+" , "+ unAutreParametre; 
} 

return uneClosure; 
} 

var retour = uneFonction( "Mon parametre"); 

var valeurRetour = retourC'Mon autre parametre"); 

// valeurRetour contient « Les parametres sont: Mon parametre, Mon autre parametre » 

Cette fonctionnalite tres puissante de JavaScript est couramment utilisee pour mettre en 
oeuvre les concepts de la programmation objet avec ce langage, comme nous le verrons 
au chapitre suivant. 

II convient cependant d'utiliser prude mment ce concept puisque certains navigate urs, 
notamment Internet Explorer, ne gerent pas les closures correctement dans les cas de 
references cycliques, entrainant des fuites memoire. Nous reviendrons sur ce type de 
probleme au chapitre 3, relatif a la programmation orientee objet avec JavaScript. 

Gestion des exceptions 

Comme la plupart des langages objet, JavaScript permet de gerer les exceptions. Ce meca- 
nisme offre la possibilite d'intercepter les erreurs au lieu de les laisser traiter par l'inter- 
cepteur du langage. Cela evite l'arret brutal de l'execution d'un script et, en conjonction 
avec un gestionnaire d' exceptions robuste, facilite le debogage des applications. 

Le langage offre egalement la possibilite de lancer des exceptions applicatives. 

Interception globale 

JavaScript offre la possibilite d'intercepter d'une maniere globale ou pour une bloc HTML 
particulier toutes les erreurs qui surviennent. Lorsqu'une erreur se produit, l'interpreteur 
passe la main a l'observateur de l'evenement s'il a ete specifie. Nous detaillons a la 
partie III de l'ouvrage la gestion des evenements survenant dans une page HTML avec 
JavaScript. 
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Le code suivant illustre la mise en oeuvre de ce mecanisme 



<script 1 angage="text/javascript"> 

function gestionErreurs(message, fichier, ligne) {<-© 

} 

onerror = gestionErreurs; <-© 
</script> 

Comme nous pouvons le voir au repere O, la fonction de gestion des erreurs doit posse- 
der trois parametres. Le premier correspond au message d'erreur original, le second au 
fichier dans lequel l'erreur s'est produite et le dernier a la ligne. Au repere ©, la fonction 
est enregistree en tant que gestionnaire des erreurs par le biais de l'evenement onerror. 

Attraper les exceptions 

JavaScript offre la meme syntaxe que Java pour gerer les exceptions, au moyen des mots- 
cles try, catch et finally. Le premier definit le bloc d' interception des exceptions, le 
second les traitements a realiser en cas de levee d'exceptions et le dernier les traitements 
a executer, que des exceptions soient levees ou non. 

Le code suivant decrit la facon de gerer les exceptions (nous faisons volontairement 
appel a une methode testExcepti on inexistante afin de declencher une exception) : 

try { 

testException( ) ; //Cette methode est inexistante! 
} catch(error) { 

alertC'Une exception a ete levee"); 

alertC'Nom de 1 'exception levee : "+error.name) ; 

alert( "Message de 1 'exception levee : "+error. message) ; 
} finally { 

alertC'Passage dans finally"); 
} 

A l'execution de ce code, la valeur de la propriete name de l'exception est ReferenceError, 
et la valeur de la propriete message est « testExcepti on is not defined ». Notons que le 
code defini dans le bloc f i nal 1 y est bien appele. 

Lancer des exceptions 

JavaScript offre la possibility aux applications de lancer des exceptions afin de signaler 
une erreur. Cette fonctionnalite se realise par 1' intermediate du mot-cle throw de la meme 
maniere que pour le langage Java. Le code suivant en donne un exemple d'utilisation : 

try { 

throw new Error( "test") ; 
} catch(error) { 

alertC'Une exception a ete levee"); 

alertC'Nom de l'exception levee : "+error.name) ; 

alert( "Message de l'exception levee : "+error. message) ; 
} 
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Le langage offre la possibility de definir ses propres classes d'exception. Ces dernieres 
n'ont pas besoin d'heriter de la classe Error car le mot-cle throw permet de declencher 
n'importe quelle classe JavaScript. 

Le code suivant illustre 1' implementation d'une exception utilisateur ainsi que son utilisation : 

function MonException(message) { 

this. name = "MonException" ; 

this. message = message; 
} 
try { 

throw new MonExceptionC'test" ) ; 
} catch(error) { 

alertC'Une exception a ete levee"); 

alertC'Nom de 1 'exception levee : "+error.name) ; 

alert( "Message de 1 'exception levee : "+error. message) ; 



Conclusion 



Nous avons rappele dans ce chapitre les concepts de base du langage JavaScript de maniere 
a faire bien comprendre ses principaux mecanismes. Ces derniers correspondent a la facon 
dont le langage gere les variables, du fait de leur manque de typage, ainsi que les conditions, 
les structures de controle et les tableaux. 

Nous avons en outre detaille les fonctionnalites offertes par JavaScript pour gerer les types 
de base sous differentes formes, notamment en tant que pseudo-objets. La separation entre 
les types primitifs et les objets correspondants n'etant pas clairement definie par le langage, 
nous avons introduit les methodes de ces derniers, qui seront reprises et developpees au 
chapitre 3 traitant des principes de la programmation orientee objet avec JavaScript. 

Nous avons enfin evoque les elements de langage offerts par JavaScript afin de structurer 
les developpements. Comme nous le verrons dans la suite de l'ouvrage, la facon dont les 
fonctions sont utilisees par JavaScript permet de resoudre avec elegance certaines proble- 
matiques recurrentes de la programmation objet. 
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JavaScript et la prog ram mation 

orientee objet 



JavaScript avait la reputation d'etre un langage peu elabore et peu structure, dont 1' utili- 
sation se limitait aux controles des saisies. De ce fait, une utilisation standard de Java- 
Script dans des pages HTML entrainait rapidement des interferences entre differentes 
fonctions ou variables, lesquelles sont globales a une page, et, par voie de consequence, 
des difficultes a maintenir le code, d'autant que la lisibilite de celui-ci tend a diminuer 
fortement en fonction de sa taille. 

Avec l'arrivee des applications Internet riches, le code JavaScript embarque se doit d'etre 
beaucoup plus robuste et structure, puisque les fonctionnalites et les traitements deviennent 
beaucoup plus complexes. II doit egalement prendre en compte toutes les possibilites du 
langage arm d'etre modulaire et evolutif. 

Le langage JavaScript offre la possibilite de mettre en ceuvre la plupart des concepts objet, 
tels que l'heritage et le polymorphisme. Les developpeurs peuvent tirer parti de ces mecanis- 
mes pour augmenter la qualite, la lisibilite et la modularite de leurs applications JavaScript. 

La facon de mettre en ceuvre les concepts objet est specifique a ce langage et est essen- 
tiellement fondee sur les fonctions et closures de JavaScript. 

Rappel des principes de la programmation objet 

Avant d'aborder la programmation orientee objet avec JavaScript, nous allons revenir sur 
les concepts de ce paradigme ainsi que sur ses avantages. Pour illustrer notre propos, 
nous utiliserons le langage de modelisation UML. L'objectif de cette section n'est pas de 
decrire les specificites de tel ou tel langage objet mais d' illustrer leurs principaux concepts. 
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UML (Unified Modeling Language) 

UML correspond a un standard de moderation objet congu par I'OMG (Object Modeling Group). Ce 
standard de modelisation, en version 2 actuellement, offre un diagramme permettant de modeliser des 
classes ainsi que leurs relations. 



La programmation orientee objet est un paradigme visant a ameliorer la modularite des 
applications en utilisant des abstractions plus evoluees que les fonctions ou les procedures. 
Son objectif est de rassembler en une seule entite logique (la classe) un ensemble de 
donnees (les attributs) et un ensemble de traitements (les methodes). Les methodes peuvent 
s'appuyer sur les attributs pour realiser leurs traitements. Lobjectif est de modulariser les 
traitements arm de faciliter leur reutilisation. 

Ce type de langage permet de mettre en oeuvre le mecanisme d' heritage arm d'etendre les 
mecanismes d'une classe. Un des avantages de ce mecanisme reside dans la possibilite 
d'utiliser des classes existantes sans connaitre leurs implementations. Le polymorphisme 
va de pair avec l'heritage puisqu'il specifie qu'un objet peut etre considere du point de vue 
du type de sa classe d' instantiation mais egalement du type d'une de ses classes meres. 

Les sections qui suivent entrent plus en detail dans les concepts de la programmation 
orientee objet. 



Classes et objets 



Le concept central de la programmation objet est la classe. Composee d' attributs et de 
methodes, c'est elle qui permet de definir la structure des entites manipulees. Attributs et 
methodes permettent de definir respectivement les etats et les comportements de la classe. 

Dans la plupart des langages objet, le mot-cle dedie class est introduit afin de definir 
les classes. Dans toute cette section, nous illustrons notre propos a l'aide de la classe 
Vehi cul e, dont la figure 3.1 illustre la structure par 1' intermediate du diagramme de classes 
du langage UML. 



Figure 3.1 

Modelisation de la classe Vehicule 



Vehicule 



■marque : String 
■modele : String 
couleur : String 
■vitesse : int 



+Vehicule() 

+repeindre(entree couleur : String) 

+accelerer() 

+freiner() 



Nous avons volontairement supprime les parametres du constructeur afin de ne pas surcharger 
le schema. 
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Une classe possede toujours une ou plusieurs methodes particulieres, appelees constructeur, 
permettant de construire l'objet. Certains langages en fournissent un par defaut s'il n'est 
pas explicitement defini dans la classe. 

Une classe possede egalement des attributs, permettant de stacker des etats, et des methodes, 
permettant d'executer des traitements en utilisant eventuellement ces attributs. 

Les langages objet introduisent le mot-cle thi s afin de permettre a un objet de s'autorefe- 
rencer. II permet notamment de differencier les variables locales par rapport aux attributs 
de classe ou encore de permettre a un objet de se passer en parametre a un autre objet. 

La notion de package est egalement introduite afin d'organiser les classes. Un package 
correspond a un ensemble de classes organisees selon une structure arborescente. 

Instances et objets 

Une classe n'est pas utilisable directement dans une application, car elle correspond a un 
concept abstrait et structurel. Les applications travaillent sur des objets ou instances 
correspondant a des occurrences de classes. Ces instances sont creees a la demande a 
partir du modele de structure qu'est la classe par l'intermediaire du mot-cle new. 

Prenons l'exemple de la classe Vehi cul e. Cette derniere definit ses attributs (marque, model e, 
couleur) et methodes (repeindre, accel erer, freiner). Une instance de vehicule corres- 
pond a un vehicule d'une marque et d'un modele particuliers. Elle possede une couleur, 
et il est possible d'interagir avec elle afin d'accelerer ou de freiner, par exemple. 

Le code suivant illustre l'utilisation d'une instance de la classe Vehi cul e : 

Vehicule monVehicule = new Vehiculet "maMarque" , "monModele" , "bleue") ; 

monVehicule.accelerer (); 

(...) 

monVehicule. freiner ( ) ; 

Nous constatons qu'une instance ou objet correspond a une entite existante dans 1' application. 
Les attributs de la classe prennent des valeurs specifiques, qui determinent leurs comporte- 
ments. La classe elle-meme permet uniquement de definir la structure de ces instances. 

Encapsulation et visibilite 

Comme nous l'avons vu, une classe correspond a une entite possedant des attributs et des 
methodes. II n'est pas forcement utile de rendre ces derniers accessibles depuis l'exterieur 
de la classe. L encapsulation revient a interdire l'acces a certains elements d'une classe 
afin de proteger ses etats et fonctionnements internes. 

La plupart du temps, les attributs de classe ne doivent pas etre exposes directement a 
l'exterieur de la classe. C'est la raison pour laquelle la mise en oeuvre d'accesseurs et de 
mutateurs constitue une bonne pratique de conception. 

Afin de mettre en oeuvre 1' encapsulation, la plupart des langages objet offrent un support 
permettant de controler la visibilite des attributs et methodes par des elements de langage. 
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Comme indique au tableau 3.1, il existe plusieurs niveaux de visibilite des attributs et 
methodes, dont la signification est quasiment commune a la plupart des langages objet. 



Niveau de visibilite 

Par defaut 
Prive 
Protege 
Public 



Tableau 3.1 Niveaux de visibilite des attributs et methodes 

Description 

Seules les entites du meme package et les sous-classes ont acces aux elements de la classe. 
Les entites externes n'ont pas acces aux elements de la classe. 
Seules les sous-classes ont acces aux elements de la classe. 
Les entites externes ont acces aux elements de la classe. 



L'heritage 



Par souci de modularite, les langages orientes objet mettent en oeuvre des mecanismes 
d'heritage. Ces derniers permettent de definir des sous-classes afin d'enrichir et de bene- 
ficier d'attributs et de methodes de classes existantes. Le mot-cle extends est generale- 
ment mis a disposition du developpeur afin de creer les relations d'heritage entre classes. 

La figure 3.2 illustre l'utilisation de la methode UML et de son diagramme de classes 
afin de decrire un lien d'heritage entre la classe Vehicule precedemment decrite et la 
classe VehiculeMotorise. 



Figure 3.2 

Modelisation de l'heritage entre les classes 
Vehicule et VehiculeMotorise 



Vehicule 



■marque : String 
■modele : String 
-couleur : String 
■vitesse : int 



+Vehicule() 

+repeindre(entree couleur : String) 

+accelerer() 

+freiner() 



s 



VehiculeMotorise 



-demarre : bool 



+VehiculeMotorise() 

+demarrer() 

+couperMoteur() 



La classe Vehi cul eMotori se specialise la classe Vehi cul e et peut utiliser le constructeur de 
la classe Vehi cul e par 1' intermediate du mot-cle super. II est egalement possible de specifier 
de nouveaux attributs ainsi que de nouvelles methodes. Les methodes peuvent appeler 
des methodes de la classe mere, si necessaire. 
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D'une maniere generate, les langages orientes objet offrent un mecanisme permettant de 
referencer la classe mere. Dans le cas de Java, le mot-cle super est mis a la disposition des 
sous-classes arm de referencer la classe mere. II permet ainsi d'utiliser les constructeurs, 
methodes et attributs accessibles de cette derniere. 

Encapsulation et visibility 

La plupart du temps, les langages orientes objet donnent la possibilite de controler 1' acces 
aux elements auxquels ont acces les classes. 

En reprenant les niveaux de visibilite decrits precedemment, les differentes possibilites sont 
les suivantes : 

• Une methode ou un attribut public peut etre utilise par n'importe quelle classe. 

• Une methode ou un attribut protege peut etre utilise par les sous-classes mais n'est pas 
visible par les classes sans lien d'heritage. 

• Une methode ou un attribut prive ne peut etre utilise que par la classe elle-meme. Les 
sous-classes n'y ont pas acces. 

Reprenons l'exemple des classes Vehicule et VehiculeMotorise de la section precedente. 
Si nous modifions la visibilite de la methode accelerer de la classe Vehicule avec la 
valeur protegee, cette derniere peut etre utilisee dans la classe VehiculeMotorise mais 
n'est pas accessible en dehors des sous-classes de la classe Vehicule. Si sa visibilite 
devient privee, elle ne peut etre utilisee que dans la classe Vehi cul e. 

Classes et methodes abstraites 

Une classe abstraite est une classe qui ne peut etre instanciee dans une application. II 
s'agit d'une abstraction de haut niveau, destinee a etre specialisee arm de repondre a 
differents contextes d'utilisation. Elle ne peut done etre utilisee que par l'intermediaire 
de classes qui l'etendent. 

Cette classe definit la plupart du temps une ou plusieurs methodes abstraites, dont le code 
n'est pas defini dans la classe. Ces dernieres peuvent cependant etre utilisees dans les 
methodes concretes de la classe. Son role est de permettre aux sous-classes de parametrer 
l'algorithme des methodes de la classe mere. Les classes filles concretes ont quant a elles 
la responsabilite de les implemented 

Les langages orientes objet utilisent le mot-cle abstract afin de definir ces types de classes 
et de methodes. Si nous reprenons notre classe Vehi cul e, nous pouvons la rendre abstraite 
ainsi que ses methodes accel erer et f rei ner. Cette classe ne peut toutefois etre instanciee, 
si bien que les deux methodes precedentes n'ont pas d'implementation. Une sous-classe 
telle que Vehi cul eMotori se aurait la responsabilite, par exemple, de les implementer. 

Classes et methodes finales 

Une classe finale est une classe qui ne peut etre etendue dans une application et correspond 
done au dernier niveau d'heritage. 
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N'importe quelle classe peut definir une ou plusieurs methodes finales. Dans ce cas, ces 
dernieres ne peuvent etre surchargees dans une sous-classe. Notons qu'une classe ne doit 
pas etre necessairement finale pour definir des methodes finales. 

Les langages orientes objet utilisent le mot-cle f i nal afin de definir ces types de classes et 
de methodes. Si nous reprenons notre classe Vehi cul e, nous pouvons rendre ses methodes 
accelerer et freiner finales. Ces deux methodes ne peuvent toutefois etre surchargees 
dans les sous-classes telles que Vehi cul eMotorise. 

Notons qu'il est possible de definir des attributs finaux qui correspondent a des constantes. 

L heritage multiple 

Certains langages orientes objet permettent de faire heriter une classe de plusieurs autres. 
Ce mecanisme est supporte par C++ mais pas par Java. 

La figure 3.3 illustre un exemple d'heritage multiple fonde sur les classes Vehi cul e et 
Vehi cul eAmphi b1 . Cette derniere herite desormais de la classe Amphibi afin de specifier que 
le vehicule motorise peut se deplacer dans l'eau. 



Vehicule 



■marque : String 
■modele : String 
-couleur : String 
■vitesse : int 



+Vehicule() 

+repeindre(entree couleur : String) 

+accelerer() 

+freiner() 



£- 



Bateau 



+Bateau() 

IS" 



VehiculeAmphibi 



-demarre : bool 



+VehiculeAmphibi() 

+demarrer() 

+couperMoteur() 



Figure 3.3 

Modelisation de I 'heritage multiple entre les classes Vehicule, Bateau et Vehicule Amphibi 



Les mecanismes decrits aux sections precedentes s'appliquent egalement a 1' heritage 
multiple. 

II faut avoir a 1' esprit que la mise en oeuvre de 1' heritage multiple engendre des problemes 
et complexifie les relations entre les classes. Le principal probleme peut provenir de 
l'existence de methodes ou d'attributs similaires dans les parents d'une classe. Dans ce cas, 
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arm de garantir une solution coherente, le langage doit fournir un mecanisme pour realiser 
une fusion ou un renommage des entites dupliquees. 

Agregation et composition 

L'agregation correspond au fait de referencer un objet dans un autre objet. Ainsi, un attribut 
d'une classe est du type d'une autre classe. 

La figure 3.4 illustre la representation en UML d'une relation d'agregation entre les classes 

Vehicul e et Conducteur. 



Conducteur 



1 



Vehicule 



■marque : String 
-modele : String 
-couleur : String 
■vitesse : int 



+Vehicule() 

+repeindre(entree couleur : String) 

+accelerer() 

+freiner() 



Figure 3.4 

Representation UML d'une relation d'agregation 



La classe Vehicul e est enrichie par l'information relative a son conducteur principal. Cela 
se traduit par un attribut de classe, conducteurPrincipal, et eventuellement des methodes 
de manipulation de cet attribut. L'agregation peut egalement etre realisee par l'inter- 
mediaire d'un attribut d'une classe correspondant a une collection. 

La composition correspond a une agregation forte. En effet, les cycles de vie des objets 
references suivent celui de l'objet contenant, si bien que lorsque ce dernier est detruit, les 
autres le sont egalement, contrairement a ce qui se produit avec l'agregation. 

La figure 3.5 illustre la schematisation d'une relation de composition entre la classe Vehi - 
cul e et une classe Roue avec le langage UML. 

Dans l'exemple ci-dessus, lorsqu'une instance de la classe Vehicule est detruite, les refe- 
rences a la classe Roue sont egalement detruites. 
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Figure 3.5 

Representation UML d'une 
relation de composition 



Roue 



Vehicule 



marque: String 
modele: String 
couleur: String 
vitesse : int 



+Vehicule () 

+ repeindre (entree couleur :String) 

+accelerer() 

+freiner() 



Le polymorphisme 

Les mecanismes de polymorphisme permettent a une application de voir une instance 
sous differentes formes. Cette instance peut ainsi etre consideree comme etant non seule- 
ment du type de sa classe, mais egalement des types de ses differentes classes meres. Une 
instance de notre classe Vehi cul eMotori se peut des lors etre vue comme une instance de sa 
classe mere Vehicule. La considerer comme Vehicule revient toutefois a restreindre le 
nombre de ses methodes utilisables. 

Le polymorphisme est intimement lie aux mecanismes de transtypage, qui permettent de 
convertir le type d'une instance, quand c'est possible, en un autre type. 

Le code suivant donne un exemple de transtypage d' instances : 

IVehiculeMotorise voiture = (...); 
Vehicule vehicule = (Vehicule)voiture; «-0 
VehiculeMotorise 1 aMemeVoiture = (VehiculeMotorise)vehicule;<-© 

Au repere O, le transtypage ascendant VehiculeMotorise fonctionne correctement puisque la 
classe Vehi cul e est une classe mere de la classe Vehi cul eMotori se. Au repere ©, le transtypage 
descendant est egalement correct puisque l'instance transtypee est de type Vehi cul eMotori se. 

En resume 

Nous avons decrit dans cette section les principaux concepts de la programmation 
orientee objet. 

Le langage JavaScript n'est pas un langage oriente objet, mais il permet neanmoins de 
mettre en oeuvre les principaux concepts decrits au cours des sections precedentes. S'il 
permet de travailler avec des classes et des objets, il ne fournit pas d'elements de langage 
specifiques a cet effet. 
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Le tableau 3.2 recapitule les differents concepts des langages orientes objet supportes par 
JavaScript. Les sections suivantes entrent plus dans le detail de la programmation orientee 
objet avec JavaScript. 



Tableau 3.2 Concepts des langages objet supportes par JavaScript 

Concept Support par JavaScript 

Classe JavaScript supporte partiellement les classes. II permet de definir des classes en se fondant sur les 

mecanismes des fonctions et des closures ainsi que sur leur attribut prototype mais ne fournit pas 
d'element de langage dedie. 

JavaScript ne supporte pas explicitement les classes et methodes abstraites. II peut neanmoins les 
mettre en oeuvre, puisqu'une methode d'une classe peut en appeler une autre qui n'existe pas dans 
la classe. La classe fonctionne correctement si une classe fille la definit. Si tel n'est pas le cas, une 
erreur se produit. JavaScript ne permet pas de verrouiller ce mecanisme. 



Classes et methodes 
abstraites 



Composition 
et agregation 

Controle de I'heritage 
et visibilite 



Encapsulation 
et visibilite 



Heritage 

Mot-cle super 
Mot-cle this 

Package 

Polymorphisme 

Typage 






JavaScript supporte ces deux mecanismes, puisqu'il permet d'utiliser des variables par reference 
(hormis les types primitifs). 

JavaScript ne supportant pas le modificateur final, il ne permet pas de controler I'heritage dans le 
but d'empecher de creer des sous-classes ou de surcharger des methodes . Le langage ne supporte 
pas non plus le type de visibilite protege. 

JavaScript ne fournit pas de mecanisme permettant de mettre en ceuvre ('encapsulation et de sup- 
porter convenablement tous les niveaux de visibilite. Comme il ne permet pas de gerer dans tous les 
cas le niveau prive, seul le niveau de visibilite public peut etre utilise tout le temps. Dans ce cas, 
les differents attributs et methodes d'un objet peuvent etre accedes depuis des entites exterieures. 
L'encapsulation n'est alors pas garantie par le langage. 

JavaScript permet de mettre en oeuvre I'heritage mais ne fournit pas de mot-cle extends a cet effet. 
Comme nous le verrons, differentes techniques, fondees sur les construoteurs des classes meres et 
I'attribut prototype des fonctions, permettent cependant de mettre en ceuvre I'heritage multiple. 

Non supporte 

JavaScript supporte ce mot-cle dans une fonction en faisant reference a I'objet sur lequel la methode 
est appelee. 

JavaScript ne fournit pas a proprement parler la notion de package. II est cependant possible d'en 
simuler un en I'incorporant dans le nom d'une classe. 

JavaScript ne supporte pas ce concept puisque la mise en ceuvre de I'heritage avec ce langage 
consiste en une recopie des methodes et attributs. 

JavaScript possede un typage dynamique. Le type d'un objet n'est done oonnu qu'au moment de 
I'execution du code et peut varier au cours de I'execution. Le langage fournit toutefois les mots-cle 
typeof et instanceof afin de determiner le type d'un objet. 



Classes JavaScript 

Comme nous venons de le voir, JavaScript n'offre qu'un support partiel des concepts 
orientes objet mais permet d'utiliser differents types de classes. Certaines d'entre elles 
sont fournies directement par le langage, tandis que d'autres le sont par l'environnement 
d'execution. Le langage offre egalement au developpeur la possibilite de definir ses 
propres classes par 1' intermediate des fonctions. 
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Bien qu'il permette l'utilisation d'objets et dispose d'objets natifs, JavaScript n'est pas 
veritablement un langage orients objet. II ne fournit pas d' elements de langage arm de 
supporter ce paradigme mais permet simplement d'emuler les differents principes de la 
programmation orientee objet. 

JavaScript ne supporte done pas veritablement la notion de classe et n'offre pas de mot-cle 
dedie class afin d'en definir. Pour mettre en ceuvre les concepts de la programmation 
objet, il se fonde unique ment sur les mecanismes des fonctions et des closures ainsi que 
sur l'attribut prototype. 



Classe et objet JavaScript 

Le langage JavaScript ne supporte pas la notion de classe afin de definir la structure des objets. II se 
fonde a la place sur les principes des fonctions. Dans ce langage, les fonctions correspondent a des objets 
puisqu'elles y peuvent etre referencees. 

C'est la raison pour laquelle certains auteurs preferent ne pas parler de classe JavaScript mais plutot 
d'objet JavaScript, aussi bien pour I'entite definissant la structure d'un objet que pour ses instances. Par 
exemple, certains parlent de I'objet XMLHttpRequest plutot que de la classe XMLHttpRequest. 
Dans cet ouvrage, afin de simplifier nos explications et d'eviter toute confusion, nous avons fait le choix de 
designer la structure des objets JavaScript par le terme de classe et les instances de ces classes par le 
terme d'objet. 



Dans ce contexte, un objet ou une instance correspond a une collection d'attributs et de 
fonctions, appelees dans ce contexte methodes. lis peuvent etre ajoutes et supprimes 
dynamiquement au cours de son utilisation. Nous utilisons par la suite le terme classe 
pour designer la structure de I'objet qui specifie la liste de ses methodes et attributs. 

JavaScript fournit deux possibilites de definir un objet. La premiere consiste a utiliser la 
forme litterale d'un tableau associatif et la seconde a se fonder sur une fonction construc- 
teur ou sur son attribut prototype. Ces deux derniers elements peuvent eventuellement 
etre utilises conjointement. 

Le tableau 3.3 recense les differents types de classes du langage. 



Type 

Classes applicatives 

Classes de base 

Classes fournies par I'envi- 
ronnement d'execution 

Classes pre-instanciees 



Tableau 3.3 Types de classes de JavaScript 

Description 

JavaScript permet a I'application de creer ses propres classes et objets dans un souci de str ucturation 
et de modularite. 

JavaScript fournit les classes relatives aux differents types natifs du langage. 

L'environnement d'execution fournit des classes aux applications JavaScript. Dans le cas d'une 
execution dans un navigateur, par exemple, des instances de ces classes relatives aux elements 
HTML contenus dans la page sont disponibles. 

JavaScript pre-instancie deux classes particulieres afin qu'elles puissent etre utilisees lors de I'exe- 
cution. Les instances se nomment Global et Math. Global possede un fonctionnement particulier, 
que nous decrirons par la suite. 
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Classes de base 



JavaScript offre differentes classes correspondant a la representation objet des differents 
types primitifs et de certains elements du langage, ainsi qu'a la classe racine de tous les 
objets et a differentes classes d'erreur. 

Le tableau 3.4 recapitule l'ensemble de ces classes de base. 

Tableau 3.4 Classes de base de JavaScript 



Classe 


Description 


Array 


Representation sous forme d'objet d'un tableau JavaScript 


Boolean 


Representation sous forme d'objet du type primitif booleen 


Date 


Classe representant une date 


Error 


Classe d'erreur generique 


Eval Error 


Classe relative aux erreurs survenant lors de I'interpretation de code JavaScript par 1'intermediaire de 
lafonction eval 


Function 


Representation sous forme d'objet d'une fonction JavaScript 


Number 


Representation sous forme d'objet d'un nombre 


Object 


Classe de base de toutes les classes 


RangeError 


Classe relative aux erreurs survenant lors de I'utilisation de nombres excedant la plage autorisee 
(superieurs a MAXJ/ALUE ou inferieurs a MINJ/ALUE) 


ReferenceError 


Classe relative aux erreurs survenant lors de I'utilisation d'une reference incorrecte 


RegExp 


Classe permettant d'utiliser des expressions regulieres 


String 


Classe representant une chaine de caracteres 


SyntaxError 


Classe relative aux erreurs de syntaxe 


TypeError 


Classe relative aux erreurs de typage 


URIError 


Classe relative aux erreurs survenant lors d'une mauvaise utilisation des methodes de traitements 
des URI de I'objet Global 



La classe racine Object 

La classe racine de tous les objets est la classe Object. Cette classe, la plus simple du langage, 
fournit ses attributs et methodes a toutes les autres classes JavaScript. 

Le tableau 3.5 recapitule ses attributs et le tableau 3.6 ses methodes. 



Tableau 3.5 Attributs de la classe Object 

Attribut Description 

constructor Reference la methode utilisee pour creer une instance de la classe. 

prototype Sert a initialiser I'objet lors de son instanciation. Cet attribut est tres important pour mettre en ceuvre ses 

propres classes et I'heritage en JavaScript. Nous detaillons un peu plus loin dans ce chapitre la facon de 
I'utiliser. 
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Tableau 3.6 Methodes de la classe Object 



Methode 


Parametre 


Description 


hasOwnProperty 


Norn de propriete 


Permet de determiner si I'objet possede un attribut ou une methode dont le 
nom correspond au parametre. 


isPrototypeOf 


Classe 


Permet de determiner si un objet est le prototype d'un autre. 


propertylsEnumerable 


Norn de la propriete 
de I'objet 


Permet de determiner si I'attribut dont le nom est passe en parametre peut 
etre enumere par I'intermediaire d'une boucle for... in. 


toString 


- 


Representation de I'objet sous forme de chaine de caracteres 


val ueOf 


■ 


Valeur associee a I'objet. Cette methode est utile dans le cas d'objets relatifs a 
des types primitifs. Sinon, elle renvoie la meme valeur que la methode toSt ri ng. 



La classe Object permet de definir facilement des instances vides, comme dans le code suivant : 

var o = new Object( ) ; 

L' objet precedemment cree est equivalent a I'objet litteral suivant (nous detaillons les 
objets litteraux un peu plus loin dans ce chapitre) : 

var o={}; 

Classes relatives aux types primitifs 

Les classes relatives aux types primitifs du langage JavaScript sont les classes Boolean, 
Number et String. 

Les methodes de ces classes peuvent etre egalement utilisees sur les types primitifs, 
considered comme des pseudo-objets par JavaScript. Leur utilisation a d'ailleurs ete 
abordee au chapitre 2, relatif aux bases du langage. 

Classes d'elements du langage 

JavaScript permet de mettre en ceuvre des tableaux, comme nous l'avons vu au chapi- 
tre 2. Le langage permet egalement de construire des tableaux par I'intermediaire de la 
classe Array. 

Le code suivant illustre la facon de creer un tableau avec cette classe : 

var tableau = new ArrayO; 

tableau. push( "premiere chaine" , "seconde chaine"); 

for(var cpt=0;cpt<tableau.length;cpt++) { 

(...) 
} 

Ce code est similaire au code suivant, qui utilise une expression litterale afin de creer un 
tableau : 

var tableau = [] ; 

tableau[0] - "premiere chaine"; 

tableau[l] = "seconde chaine"; 

for(var cpt=0;cpt<tableau.length;cpt++) { 

(...) 
} 



JavaScript et la programmation orientee objet 



Chapitre 3 

JavaScript permet de combiner ces deux approches, le tableau etant toujours gere en tant 
qu'objet en interne, comme dans le code suivant : 

Ivar tableau = new Array ("premiere chaine" ."seconde chaine"); 
tableau[2] = "troisieme chaine"; 

Toutes les methodes abordees a la section relative aux tableaux du chapitre precedent 
peuvent etre egalement utilisees avec l'approche objet. 

A l'instar des tableaux, JavaScript offre une representation objet des fonctions par le biais de 
la classe Function. 

Le code suivant illustre la facon de creer une fonction par 1' intermediate de cette classe : 

var maFonction = new Functiontparametrel, parametre2, 

"return parametrel+parametre2") ; 
//Appel de la fonction 
var resultat = maFonction(13, 15); 

L utilisation de cette technique est equivalente au code suivant : 

function maFonctiontparametrel , parametre2) { 

return parametrel+parametre2; 
} 

//Appel de la fonction 
var resultat = maFonction(13, 15); 

II est toutefois recommande de passer par la methode classique pour creer des fonctions, 
car elle permet de s'abstraire des problemes lies aux chaines de caracteres contenues 
dans leur definition. Comme pour la classe Array, l'interet de la representation objet 
d'une fonction provient des methodes qu'il est possible d'utiliser avec la classe Function. 
Ces methodes sont recapitulees au tableau 3.7. 

Tableau 3.7 Methodes de la classe Function 



Methode 






Parametre 


Description 


apply 






Objet et tableau 
de parametres 


Appelle une fonction JavaScript pour I'objet specifie en lui passant les parametres 
fournis dans le tableau. 


call 






Objet et para- 
metres 


Appelle une fonction JavaScript pour I'objet specifie en lui passant les parametres 
fournis. 


toSource, 
val ueOf 


toStri 


ng. 


■ 


Retournent le code source de la fonction. 



Nous detaillons Tutilisation des methodes apply et call a la section decrivant la facon 
d'appeler le constructeur d'une classe mere. 

Les attributs de la classe Functi on sont recapitules au tableau 3.8. 
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Tableau 3.8 Attributs de la classe Function 

Attribut Description 

arguments Permet d'acceder aux parametres d'invocation de la fonction. 

constructor Specifie la fonction qui sert de base a la creation de I'attribut prototype. 

1 ength Correspond au nombre de parametres declares pour la fonction. 

prototype Utilise pour mettre en ceuvre les concepts objet avec JavaScript. 
I I 

Remarquons I'attribut prototype, que nous detaillons dans la suite du chapitre, qui est 
fondamental pour la mise en ceuvre des concepts objet. 

Tableaux et fonctions etant considered comme des objets, il est possible de leur ajouter 
des attributs et des methodes. 

Expressions regulieres 

Comme pour les tableaux et fonctions, JavaScript fournit une classe Reg Exp arm de mettre 
en ceuvre des expressions regulieres. 

Le code suivant illustre la facon de creer et manipuler une expression reguliere avec cette 
classe : 

Ivar expression = new RegExp( "test" , "gi ") ; 
var trouvee = expression. testC'Ceci est un test"); 

Ce code est similaire au code suivant, fonde sur la representation litterale des expressions 
regulieres : 

Ivar expression = /test/gi ; 
var trouvee = expression. testC'Ceci est un test"); 

Les methodes decrites a la section relative aux expressions regulieres du chapitre precedent 
peuvent etre egalement utilisees avec l'approche objet. 

Classes pre-instanciees 

JavaScript pre-instancie deux classes pour ses applications, dont les noms de leurs instances 
sont Global et Math. 

Global est utilisee implicitement par le langage, dont les methodes « globales » ne sont 
apparemment rattachees a aucune instance. Cette derniere ne peut done etre utilisee 
explicitement. 

Les methodes de l'instance Global sont les suivantes : 

• eval : arm d'interpreter une chaine de caracteres contenant du JavaScript. 

• parseXXX : permet de convertir des chaines de caracteres en des types primitifs. Par 
exemple, pour les entiers, la methode est parse Int. 
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• Methodes de type isXXX : permettent de verifier la veracite d'un objet pour un critere, 
comme, pour les nombres, les methodes isFinite ou isNaN. 

• Methodes escape et unescape : afin de convertir des chaines pour HTML. 

• Constructeurs des classes relatives aux types primitifs, decrites precedemment. 

Toutes ces methodes sont rattachees a l'instance Gl obal . Bien que cette derniere ne soit pas 
accessible ni utilisable directement dans les applications, ses methodes sont utilisables 
telles quelles, sans avoir a etre prefixees par Gl obal . Pour plus d' informations concernant 
ces methodes, voir, au chapitre 2, la section « Elements de base du langage ». 

L'instance Math offre des constantes mathematiques ainsi que des methodes permettant de 
realiser des operations mathematiques. 

Le tableau 3.9 recapitule les principales d'entre elles. 

Tableau 3.9 Methodes de l'instance Math 



Description 

Retourne la valeur absolue d'un nombre. 

Permettent de calculer respectivement les arc cosinus, sinus et tangente en radians. 

Retourne I'arrondi superieur d'un nombre. 

Permettent de calculer les cosinus, sinus et tangente d'un nombre. 

Permettent de calculer respectivement I'exponentiel et le logarithme d'un nombre. 

Retourne I'arrondi inferieur d'un nombre. 

Retourne la plus grande valeur des deux parametres. 

Retourne la plus petite valeur des deux parametres. 

Permettent de calculer respectivement le carre et la racine carree d'un nombre. 

Retourne un nombre pseudo-aleatoire. 

Retourne I'arrondi d'un nombre. 



Methode 


Parametre 


Abs 


Un nombre 


acos, asin, atan 


Un nombre 


Ceil 


Un nombre 


cos, sin, tan 


Un nombre 


exp, log 


Un nombre 


Floor 


Un nombre 


Max 


Deux nombres 


Min 


Deux nombres 


pow, sqrt 


Un nombre 


Random 


- 


Round 


Un nombre 




Les plus interessantes de ces methodes sont cei 1 , f 1 oor et round, qui permettent de calculer 
les arrondis de nombre, et random, qui retourne un nombre pseudo-aleatoire. 

Le code suivant illustre 1' utilisation des trois premieres : 

var nombre = 34.567; 

// Affiche 35 

alertC'Ceil : "+Math. ceil (nombre) ) ; 

// Affiche 34 

alertC'Floor : "+Math.floor(nombre) ) ; 

// Affiche 35 

alertC'Round : "+Math. round(nombre)) ; 
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Classes de I'environnement d'execution 

Nous aborderons tout au long de cet ouvrage les differents objets fournis par I'environne- 
ment d'execution. Puisque notre objectif est de nous concentrer sur la mise en ceuvre 
d' applications Internet riches, ces objets correspondent essentiellement a des evenements 
et a des representations objet des differents elements contenus dans une page HTML. 

En cas d' utilisation de JavaScript dans une page HTML, les scripts ont acces aux objets 
permettant de manipuler l'arbre DOM de la page, comme nous le verrons au chapitre 4. 

Nous verrons egalement tout au long de la partie IV que les elements graphiques, les 
evenements et les styles de la page sont accessibles sous forme d'objets. Cela rend plus 
facile leur manipulation ainsi que la gestion de leurs evenements. 

Mise en ceuvre de classes personnalisees 

L'avantage d'un langage supportant les concepts de base de la programmation orientee objet 
est qu'il permet au developpeur de creer ses propres classes arm de structurer une application. 

JavaScript offre cette possibility, bien qu'il ne supporte pas vraiment la notion de classe, 
puisque aucun element de langage specifique ne permet de definir une classe. Leur mise 
en oeuvre est cependant possible en utilisant le support des fonctions et des closures, 
decrites au chapitre precedent et en s'appuyant sur le concept de prototype decrit dans 
cette section. 

JavaScript ne fournissant pas une maniere unique de mettre en oeuvre les concepts de la 
programmation objet, plusieurs techniques permettent d'implementer des classes et de 
definir des liens d'heritage. 

Mise en oeuvre de classes 

Rappelons que JavaScript ne permet pas d'implementer tous les mecanismes objet decrit 
en debut de chapitre, puisqu'il ne fournit pas de mot-cle cl ass arm de creer une classe. 

De plus, le support de la visibilite de type privee n'est que partiel et depend de la facon 
dont sont implementees les classes. Dans tous les cas, le langage supporte la visibilite de 
type public, sans toutefois garantir les principes d' encapsulation. 

Le mot-cle this 

Le langage JavaScript fournit le mot-cle thi s, qui offre une reference, dans une fonction, 
a l'objet sur lequel cette derniere est appelee. De ce fait, il est possible d' avoir acces a 
tous les attributs et methodes de l'objet dans le code d'une fonction. 

Nous avons vu au chapitre precedent qu'une fonction pouvait etre affectee a une variable. 
Elle peut egalement etre rattachee a un objet en l'affectant a un attribut d'un objet. Le 
point important a comprendre est qu'a ce moment-la, l'objet reference par le mot-cle thi s 
change pour correspondre a l'objet dont depend maintenant la fonction. 
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Nous verrons un peu plus loin dans ce chapitre que cet aspect est tres important pour mettre 
en ceuvre 1' heritage. 

Le code suivant illustre la mise en oeuvre de ce mecanisme : 

I function test( ) { 
return this. monAttribut; 

Le code de la fonction test permet de renvoyer la valeur de l'attribut monAttribut de 
l'objet appelant la methode. Nous pouvons remarquer que la fonction n'a pas besoin d'etre 
rattachee a une classe lors de sa creation. Par contre, lors de son execution, elle doit etre 
executee sur un objet sous peine que la valeur de thi s .monAttri but soit undef i ned. 

Le code suivant decrit l'utilisation de la fonction test precedente pour un objet : 

function test(msg) { 

return msg+" : "+this .monAttribut ; 
} 

var premierObjet = new ObjectO; 
premierObjet. monAttribut = "mon attribut"; 
premierObjet. maMethode = test;*-© 

var retour = premierObjet .maMethodet "Valeur de 1 'attribut") ;<-© 
var secondObjet - new ObjectO; 
secondObjet. maMethode = test;*-© 
secondObjet. maMethodeC'Valeur de l'attribut");*-© 

Les reperes O designent l'affectation de la fonction test en tant que methode maMethode pour 
les deux objets. Dans la premiere utilisation (repere ©), la valeur de la variable retour est 
celle de l'attribut monAttribut pour l'objet premierObjet. La second utilisation (repere©) 
genere une erreur puisque aucun attribut monAttri but n'est defini pour le second objet. 

Appels de fonctions d'un objet 

Comme nous l'avons vu precedemment, JavaScript gere les fonctions en tant qu'objets de 
type Function. Cette classe possede les methodes cal 1 et apply, qui se revelent particuliere- 
ment utiles lorsqu'elles sont utilisees conjointement avec le mot-cle this. Elles permettent 
alors d'executer une fonction pour un objet donne sans affecter la fonction a l'objet. 

Ces deux methodes permettent egalement de passer des parametres a ce moment et de 
retourner la valeur de retour de la fonction appelee. 

L'unique difference entre ces methodes reside dans la facon de passer les parametres. La 
premiere, call, prend en parametre l'objet cible suivi de la liste des parametres de la 
fonction a appeler, comme le montre le code suivant : 

function test(msg) { 

return msg+" : "+this .monAttribut ; 
} 

var o = new Objectt ) ; 
o. monAttribut = "mon attribut"; 
var retour = test. call (o, "Valeur de l'attribut"); 
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La seconde, apply, prend en parametre l'objet cible, suivi d'un tableau contenant la liste 
des parametres de la fonction a appeler, comme dans le code suivant : 

function test(msg) { 

return msg+" : "+this.monAttribut; 
} 

var o = new Object( ) ; 
o.monAttribut ■ "mon attribut"; 
var parametres = ["Valeur de 1 'attribut"] ; 
var retour - test.apply(o, parametres); 

Nous verrons a la section relative a l'heritage que ces methodes peuvent etre utilisees afin 
d'appeler le constructeur des classes meres. 



Lattribut prototype 

L attribut prototype est un attribut particulier que possedent toutes les classes JavaScript. 
II est utilise lors de l'instanciation des objets afin de specifier un modele structurel pour 
leur creation. Les differents attributs et methodes presents dans 1' attribut sont assignes a 
l'objet nouvellement cree. 

Lattribut prototype permet ainsi de specifier tous les attributs et methodes communs a 
toutes les instances de la classe. 



Attribut prototype et bibliotheque prototype 

II ne faut pas confondre I'attribut prototype, qui est defini par le langage JavaScript, avec la bibliotheque 
prototype, qui etend le langage afin de le rendre plus facile a utiliser. Cette bibliotheque est decrite en 
detail au chapitre 6. 



Cette fonctionnalite permet de faire pointer toutes les instances d'une classe sur les memes 
methodes et evite de devoir dupliquer leurs codes lors des differentes instanciations des 
objets. Cela allege la memoire des applications JavaScript fondees sur des objets. 

Lattribut prototype offre egalement la possibilite d'affecter aux attributs des objets des 
valeurs par defaut. 

Le code suivant illustre la mise en oeuvre de cette technique afin d'ajouter une methode a 
une classe (repere O) et de specifier la valeur par defaut d'un attribut (repere ©) pour une 
classe : 

Object. prototype. maMethode = functionO {<-© 

(...) 
}; 

Object. prototype. monAttribut = "Valeur par defaut ";<-© 
var o = new Object( ) ; 
o. maMethode ( ) ; 

Lutilisation de prototype peut se faire a n'importe quel moment dans un script JavaS- 
cript. Tous les objets dont I'attribut prototype de la classe correspondante a ete modifie 
sont impactes, et ce, meme s'ils ont ete instancies precedemment. 
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Le code suivant illustre ce mecanisme, designe sous le terme late binding : 

var monlnstance = new ObjectO; 

Object .prototype. maFonction = functionO { 

return "test de late binding"; 
}; 
var retour = monlnstance. maFonction( ) ; 

Techniques de creation de classes 

Avec le langage JavaScript, il est possible de creer des classes en se fondant sur les carac- 
teristiques des fonctions et closures ainsi que sur le mot-cle thi s et l'attribut prototype. 

II existe plusieurs facons de creer des classes en JavaScript. Ann de decrire leur mise en 
oeuvre, nous allons utiliser une classe Stri ngBuf f er, qui offre la possibilite de concatener 
des chaines de caracteres. 

Une classe peut etre definie en se fondant uniquement sur les fonctions, les closures et le 
mot-cle this. La classe est alors definie par 1' intermediate d'une fonction dont le nom 
est celui de la classe. Cette fonction correspond au constructeur. Elle peut contenir des 
variables locales, precedees du mot-cle var, et des variables de classe, correspondant aux 
attributs, prefixees par this. Ces variables peuvent correspondre aussi bien a des attributs 
(repere O) qu'a des methodes (reperes ©), comme l'illustre le code suivant : 

function StringBuffer( ) { 

this.chaineslnternes = [];<-© 
this. append = function(chaine) {<-© 

t his. chaines Internes. push (chaine) ; 
}; 
this. clear = functionO {<-© 

this, chaines Internes. spl ice(0, 

this. chaines Internes, length) ; 
); 
this.toString = functionO {<-© 

return this.chaineslnternes. join ( "") ; 



L' utilisation de cette classe se realise de la maniere suivante : 

var sb = new StringBuffer( ) ; 

sb.appendOpremiere chaine"); 

sb.appendO et "); 

sb.append( "deuxieme chaine "); 

var resultat = sb.toString( ) ; 

//resultat contient « premiere chaine et deuxieme chaine » 

Le probleme avec cette premiere approche est que le code de chaque methode est duplique 
a chaque instanciation. Comme indique precedemment, l'attribut prototype permet de 
resoudre ce probleme. La technique decrite ici ne peut cependant etre utilisee que lorsque 
peu d'instances de la classe sont utilisees ou si des attributs ou des methodes privees 
doivent etre mis en oeuvre. 



Principes de base de JavaScript 



Partie I 



Une bonne pratique consiste a definir les methodes de la classe precedente a l'aide de 
l'attribut prototype (reperes O) de la classe StringBuffer. 

Ainsi, le code de la classe est desormais le suivant : 

function StringBuffer( ) { 

this.chaineslnternes = []; 
} 
StringBuffer. prototype. append = function(chaine) {<-© 

t hi s. chaines Internes. pus h(chaine) ; 
}; 
StringBuffer. prototype. clear = functionO {<-0 

this. chaines I nternes.spl ice(0, this. chaines Internes. length) ; 
}; 
StringBuffer. prototype. toString = functionO {<-© 

return this.chaineslnternes. joint"") ; 
}; 

Comme les attributs ne sont pas partages par les differentes instances de la classe, ils sont 
toujours dermis dans le constructeur qui a la responsabilite de les initialiser specifiquement 
pour les instances. Leur definition avec l'attribut prototype permet cependant de leur affecter 
une valeur par defaut. 

Cette facon de definir une classe a l'aide de l'attribut prototype est celle communement 
utilisee. Son principal inconvenient est de ne pas definir toute la classe dans le constructeur. 
II est possible de l'ameliorer afin de specifier les methodes sur l'attribut prototype lors 
d'un premier appel au constructeur. 

Nous utilisons pour cela une propriete du constructeur (reperes O), comme l'illustre le 
code suivant : 

function StringBuffer( ) { 

this.chaineslnternes = []; 

if( typeof StringBuffer. initial ized == "undefined" ) {<-0 
StringBuffer. prototype. append = function(chaine) { 

t his. chaines Internes. push (chaine) ; 
}; 

StringBuffer. prototype. clear = functionO { 
this.chaineslnternes .splice(0, 

this .chaines Internes. length) ; 
}; 

StringBuffer. prototype. toString = functionO { 
return this.chaineslnternes. joinO") ; 



StringBuffer. initialized = true; 



) 



II est egalement possible d'initialiser l'attribut prototype grace a un objet. Ce dernier peut 
etre defini sous forme litterale, comme nous le verrons a la section relative a JSON. Nous 
verrons egalement que certaines techniques de mise en ceuvre de l'heritage s'appuient 
sur ce principe. 
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Classes et visibility 



Comme indique precedemment, le niveau de visibilite public est le seul supporte comple- 
tement par le langage JavaScript. 

II est neanmoins possible de supporter le niveau de visibilite prive dans certains cas. En 
JavaScript, les attributs et methodes prives doivent necessairement etre definis dans le 
constructeur de la classe en tant que variables. Ann que les methodes publiques puissent 
les utiliser, il est indispensable que toute la classe soit definie dans son constructeur. 
D'apres la section precedente, deux approches verifient cette condition. 

La premiere n'utilise pas l'attribut prototype et definit attributs et methodes directement 
dans le constructeur. Les methodes privees sont alors des methodes internes au construc- 
teur et ne sont pas rattachees a une propriete de la classe. Les attributs prives sont eux 
definis en tant que variables locales simples du constructeur. 

Le code suivant illustre la mise en ceuvre de la classe StringBuffer precedente avec des 
attributs et des methodes privees : 

function StringBuffer( ) { 

var chaineslnternes = [];<-© 

function addlnlnternalTable(chaine) {<-© 

cha ines Internes. pus h(chaine) ; 
} 
function clearInternalTable( ) {<-© 

chaineslnternes.spl ice(0, 

this, cha ines Internes. length) ; 
} 
this. append - function(chaine) {<-© 

add In Internal Tab! e(chaine) ; 
); 
this. clear = functionO {<-© 

clearInternalTable( ) ; 
); 
this.toString = functionO {<-© 

return chaineslnternes. joint "" ) ; 
); 
} 

Le repere O identifie l'attribut prive de la classe, puisqu'il est defini en tant que variable 
pour le constructeur par 1' intermediate du mot-cle var. Les reperes © indiquent les 
methodes privees, puisqu'elles sont definies uniquement par le mot-cle function et ne 
sont pas affectees a des variables prefixees par this. Les methodes identifiees par le 
repere © sont publiques et utilisent une methode privee. La methode identifiee par le 
repere © est publique et utilise un attribut prive. 

La seconde approche s'appuie sur l'attribut prototype, mais son initialisation s'effectue 
dans le constructeur de la classe. 
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© 



L' adaptation du code precedent est la suivante : 

function StringBuffer( ) { 

var chaineslnternes = [];<-© 

function addlnlnternalTable(chaine) {<-© 

chaines Internes. pus h(chaine) ; 
} 

function clearInternalTable( ) { <- © 
chaines I nternes.spl iceCO, 

this .chaineslnternes .length) ; 
} 

if( typeof StringBuffer. initial ized == "undefined" ) { 
StringBuffer. prototype. append = function(chaine) {<- 

add In Internal Tabl e ( chai ne ) ; 
}; 
StringBuffer. prototype. clear ■ functionO {<-© 

clearInternalTable( ) ; 
}; 
StringBuffer. prototype. toString = functionO {<-© 

return chaineslnternes. join ( "") ; 
}; 

StringBuffer. initial ized = true; 
} 



Les reperes correspondent aux memes descriptions que precedemment. 

Notons pour finir que les techniques utilisant l'attribut prototype a l'exterieur du constructeur 
ne peuvent mettre correctement en oeuvre des elements avec une visibilite autre que publique. 
Dans ce cas, les methodes publiques ne pourraient pas appeler les methodes privees. 

Objets litteraux et JSON 

Comme JavaScript considere les objets en tant que collections d' elements contenant des 
valeurs, des references a d'autres objets ou des fonctions, un objet peut etre defini grace 
a une structure JSON. Cette derniere correspond a la representation litterale de l'objet. 

JSON est supporte en standard dans le langage et peut etre utilise directement dans les 
programmes JavaScript. 



JSON (JavaScript Object Notation) 

JSON est un format d'echange de donnees sous forme de texte independant de tout langage de program- 
mation et reprenant une partie de la specification du langage JavaScript. La documentation de ce format 
est disponible a I'adresse http://www.json.org/. JSON est facile a lire et ecrire par un etre humain et est 
simple a interpreter et generer par des programmes. 



JSON definit deux structures de donnees differentes. La premiere correspond a la definition 
d'un objet par l'intermediaire d'une liste non ordonnee de cles et de valeurs, dont le format 
est le suivant : 
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clel: valeur, 
cle2: functionO 
(...) 



La seconde correspond a la definition d'un tableau simple par l'intermediaire d'une liste 
non ordonnee de valeurs, dont le format est le suivant : 

[ 

valeur, 
functionO { 

(...) 
) 
} 

Le code suivant illustre la creation d'un objet a partir d'une structure JSON : 

var monlnstance = { 

maMethode: functionO { 
(...) 



monlnstance. maMethode( ) ; 

Cette technique permet de definir d'une maniere plus concise le contenu de l'attribut 
prototype d'une classe. 

Ainsi, la classe StringBuffer de la section precedente pourrait etre ecrite de la maniere 
suivante : 

function StringBuffer( ) { 

this.chaineslnternes = []; 
} 
StringBuffer. prototype = { 

append : function(chaine) { 

thi s.chaines Internes. push (chaine) ; 
}, 
clear : functionO { 

thi s.chaines I nternes.spl ice(0, 

thi s.chaines Internes. length) ; 
), 
toString : functionO ( 

return this.chaineslnternes. joint "") ; 



Cette notation est communement utilisee dans des bibliotheques JavaScript telles que 
prototype et dojo. 
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(-'heritage de classes 

A l'instar de la creation de classes, le langage JavaScript ne definit pas de mot-cle specifique 
(par exemple, extends) afin de realiser l'heritage de classes. De ce fait, il existe plusieurs 
manieres de faire heriter une classe d'une autre, dont certaines permettent de mettre en 
oeuvre l'heritage multiple. 

Comme nous l'avons vu a la section precedente, les elements d'une classe sont definis a 
deux niveaux : 

• Les attributs au niveau du constructeur, puisque leurs valeurs sont specifiques aux 
instances. Leurs valeurs par defaut peuvent etre cependant specifiers dans l'attribut 

prototype. 

• Les methodes au niveau du constructeur ou de l'attribut prototype, avec les implications 
decrites precedemment. 

Comme JavaScript comprend les objets comme une liste non ordonnee d' attributs et de 
methodes, la mise en ceuvre de l'heritage correspond a une copie de ces derniers de la ou 
des classes meres dans la sous-classe. 

Appel du constructeur de la classe mere 

La premiere technique permettant de mettre en oeuvre l'heritage en JavaScript consiste a 
s' appuyer sur le constructeur de la classe mere pour initialiser la sous-classe. Elle s' appuie sur 
le fonctionnement du mot-cle this, qui reference l'objet sur lequel est appelee une methode 

II s'agit d'affecter la fonction correspondant au constructeur de la classe mere a une 
methode quelconque de la classe fille. De ce fait, 1' appel de cette fonction initialise cette 
derniere classe en se fondant sur le constructeur de la classe mere. 

Le code suivant illustre la mise en ceuvre de ce mecanisme : 

function StringBuffer( ) { 

this.chaineslnternes = []; 
} 
StringBuffer. prototype. append = function(chaine) { 

t hi s.chaines Internes. push (chaine) ; 
}; 
StringBuffer. prototype. clear ■ functionO { 

this.chaineslnternes . spl ice(0, this.chaineslnternes .length) ; 
}; 
StringBuffer. prototype. toString = functionO { 

return this.chaineslnternes. joint"") ; 
}; 
function ExtendedStringBuffer( ) { 

this. parent = StringBuffer; <-€> 

this.parent( ) ; 

delete this. parent; 

(...) 
} 
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Le repere O indique l'utilisation du constructeur de la clase mere. 

Notons qu'il convient de liberer la variable contenant le constructeur de la classe mere 
puisqu'elle ne correspond pas a un element de la classe fille. Cette variable n'est d'ailleurs 
plus utilisee par la suite. Dans l'exemple ci-dessus, une fois la methode parent appelee, la 
classe ExtendedStringBuffer possede un attribut nomme chaineslnternes. 

Cette technique est fastidieuse et peu naturelle. L'utilisation des methodes call et apply 
des fonctions s'avere beaucoup plus interessante en ce qu'elles offrent la possibilite de 
definir au moment de 1' execution 1' objet sur lequel est appelee la methode. 

Le code precedent peut etre ameliore de la maniere suivante : 

function StringBuffer( ) { 

this. chaineslnternes = []; 
} 

(...) 
function ExtendedStringBuffer( ) { 

St ringBuffer. call (this) ;<-€> 

(...) 
} 

Le repere O indique toujours l'utilisation du constructeur de la clase mere. 

Dans le cas ou les methodes de la classe StringBuffer sont definies par Pintermediaire de 
P attribut prototype en dehors du constructeur, ces dernieres ne sont pas heritees avec 
cette technique. 

Utilisation du prototype de la classe mere 

L'utilisation de Pattribut prototype arm de mettre en ceuvre Pheritage peut se realiser de 
deux manieres : 

• en ecrasant le contenu de Pattribut prototype de la classe fille avec une instance de la 
classe mere ; 

• en recopiant les elements de Pattribut prototype de la classe mere dans celui de la 
classe fille. 

La premiere technique correspond au chainage de prototype et consiste a initialiser Pattribut 
prototype de la classe fille avec une instance de la classe mere. Elle permet d'affecter tous 
les elements contenus dans la classe mere a Pattribut prototype de la classe fille. Par contre, 
elle ne permet pas de supporter Pheritage multiple. 

Le code suivant illustre sa mise en oeuvre : 

function StringBuffer( ) { 

this. chaineslnternes = []; 
} 
function ExtendedStringBuffer( ) { 

(...) 
} 
ExtendedStringBuffer. prototype = new StringBuffer( ) ; 
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L'ordre dans lequel sont realises les differents traitements peut avoir une incidence importante 
sur les methodes de la classe fille. En effet, les methodes de la classe fille ajoutees a 
l'attribut prototype avant sa reinitialisation ne sont pas presentes au final. 

Le code suivant illustre ce probleme : 

function StringBuffer( ) { 

this.chaineslnternes = []; 
} 
function ExtendedStringBuffer( ) { 

(...) 
} 
ExtendedStringBuffer. prototype. uneMethode - functionO { 

(...) 
} 

ExtendedStringBuffer. prototype = new StringBuffer( ) ; 
//La methode uneMethode n'existe plus dans le prototype 

La seconde technique consiste a copier manuellement les elements presents dans l'attribut 
prototype de la classe mere dans celui de la classe fille. 

Le code suivant illustre la mise en ceuvre de ce principe : 

function StringBuffer( ) { 

this.chaineslnternes = []; 
} 

(...) 
function ExtendedStringBuffer( ) { 

(...) 
} 
fort element in StringBuffer. prototype ) { 

ExtendedStringBuffer. prototype [element] 

= StringBuffer. prototype [element] ; 
} 

Cette technique ne permet pas a la classe fille d'heriter des elements de la classe definis dans 
le constructeur de la classe mere. II convient done de combiner l'approche fondee sur le 
constructeur de la classe mere avec celle fondee sur rattribut prototype. 

Combinaison des deux techniques 

Ann de realiser efficacement l'heritage de classes avec JavaScript, la combinaison des 
deux techniques precedentes est necessaire. 

Le code suivant en donne un exemple de mise en oeuvre : 

//Definition de la classe mere 
function StringBuffer( ) { 

this.chaineslnternes = []; 
} 

//Specification des methodes de la classe mere 
StringBuffer. prototype. append = function(chaine) { 

thi s.chaines Internes. pus h(chaine) ; 
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StringBuffer. prototype. clear = functionO ( 

this.chaineslnternes.spl ice(0, t hi s.chaines Internes. length) ; 
}; 
StringBuffer. prototype. toString = functionO { 

return thi s.chaines Internes. join ( "") ; 
}; 

//Definition de la classe fille 
function ExtendedStringBuffer( ) { 

St ringBuffer. call (this) ;<-0 
} 

//Copie des methodes de la classe mere 
for( var element in StringBuffer. prototype ) {<-© 

ExtendedStringBuffer. prototype [element] 

= StringBuffer. prototype [element] ; 
} 

//Specification des methodes de la classe fille 
StringBuffer. prototype. append = function(chaine) { 

thi s.chaines Internes. push (chaine) ; 
}; 

L'appel du constructeur de la classe mere est realise dans le constracteur de la classe fille 
(repere O). La copie des elements de l'attribut prototype de la classe mere dans celle de 
la classe fille se fait au repere ©. 

Cette implementation n'est pas encore completement satisfaisante, car le code des diffe- 
rentes classes n'est pas regroupe dans leurs constructeurs respectifs. Avec la technique 
permettant de specifier les valeurs de l'attribut prototype dans le constructeur, la specifi- 
cation de l'heritage est plus concise. 

Comme cette operation ne doit etre realisee qu'une seule fois, nous utilisons une propriete 
rattachee au constructeur afin de de teeter si elle a deja ete realisee. 

Le code suivant illustre la mise en oeuvre de ce mecanisme : 

//Definition de la classe mere 
function StringBuffer( ) { 

this.chaineslnternes = []; 
//Specification des methodes de la classe mere 
if( typeof StringBuffer. initial ized == "undefined" ) ( 
StringBuffer. prototype. append = function(chaine) { 

thi s.chaines Internes. push (chaine) ; 
}; 

StringBuffer. prototype. clear = functionO { 
this.chaineslnternes.spl ice(0, 

this.chaineslnternes .length) ; 
}; 
StringBuffer. prototype. toString = functionO { 

return this.chaineslnternes. joint "") ; 
}; 
StringBuffer. initial ized = true; 
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//Definition de la classe fille 
function ExtendedStringBuffer( ) { 

//Appel du constructeur de la classe mere 
StringBuffer.call (this) ; 

//Specification des methodes de la classe fille 
if( typeof ExtendedStringBuffer. initial ized == "undefined" ) {< 
//Copie des methodes de la classe mere 
for( var element in StringBuffer. prototype ) {<-0 
ExtendedStringBuffer. prototype [element] 

= StringBuffer. prototype [element] ; 
} 

ExtendedStringBuffer. prototype. append = function(chaine) { 
t hi s.chaines Internes. pus h ( cha i ne ) ; 



ExtendedStringBuffer. initial ized = true;<-< 



} 



1 



La copie des elements de Fattribut prototype de la classe mere dans la classe fille se 
realise desormais dans le constructeur de cette derniere (repere O). Elle n'est realisee 
qu'une seule fois grace a la propriete initialized rattachee au constructeur de la classe 
ExtendedStringBuffer (reperes ©). 



L heritage multiple 

L' heritage multiple peut etre mis en oeuvre avec JavaScript de la me me maniere que 
1'heritage simple. II faut simplement prendre garde de ne pas ecraser l'attribut prototype 
lors de la realisation des differents heritages. 

Une bonne pratique consiste a copier les differents elements contenus dans les attributs 
prototype des classes meres dans l'attribut prototype de la classe fille. 

Le code suivant illustre la mise en oeuvre de 1'heritage multiple pour la classe Extended- 
StringBuffer, dontles classes meres sont StringBuffer et StringSpliter : 

function StringBuffer( ) {<-0 
this.chaineslnternes = []; 

//Specification des methodes de la premiere classe mere 
if( typeof StringBuffer. initial ized == "undefined" ) { 
StringBuffer. prototype. append = function(chaine) { 

t hi s. chai nes Internes. pus h( cha ine) ; 
}; 

StringBuffer. prototype. clear = functionO { 
this.chaineslnternes .splice(0, 

this .chai nes Internes. length) ; 
}; 
StringBuffer. prototype. toString = functionO { 

return this.chaineslnternes. joint"") ; 
}; 
StringBuffer. initialized = true; 
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function StringSpl iter( ) (<-© 

if( typeof StringSpl iter. initial ized == "undefined" ) 
StringSpl iter. prototype. spl it = function(chaine) ( 

this.chaineslnternes = chaine.spliteC "); 
}; 
StringSpl iter. initialized = true; 



function ExtendedStringBuffer( ) {<-© 
StringBuffer. call (this);*-© 
StringSpl iter.cal 1 (this) ; <-© 

if( typeof ExtendedStringBuffer. initial ized == "undefined" ) {< 
//Copie des methodes de la premiere classe mere 
for( var element in StringBuffer. prototype ) { 
ExtendedStringBuffer. prototype [element] 

= StringBuffer. prototype [element] ; 
} 

//Copie des methodes de la seconde classe mere 

for( var element in StringSpl iter. prototype ) { 

ExtendedStringBuffer. prototype [element] 

= StringSpl iter. prototype [element] ; 
} 

ExtendedStringBuffer. prototype. append = function(chaine) { 
thi s.chaines Internes. pus h(chaine) ; 



Les reperes O, © et © pointent respectivement sur les definitions des classes meres 
StringBuffer et StringSpl iter et de la classe fille ExtendedStringBuffer. Les reperes© 
illustrent l'appel aux constructeurs des classes meres ainsi que 1' initialisation de l'attribut 
prototype de la classe fille a partir de ceux des classes meres. 

Rappelons que l'heritage multiple doit etre utilise avec prudence puisqu'il peut introduire 
des problemes dans certains cas. 

En resume 

Le langage JavaScript permet de mettre en oeuvre les principes de base de la programmation 
objet. II ne fournit cependant pas d'element de langage dedie arm de definir des classes 
ainsi que leurs relations d'heritage. Pour pallier cette lacune, differentes approches peuvent 
etre utilisees en se fondant sur les mecanismes des fonctions et des closures ainsi que sur 
le mot-cle thi s et l'attribut prototype. 

Ces differentes techniques ne sont pas equivalentes et peuvent avoir des impacts sur le 
developpement d' applications. 



Principes de base de JavaScript 



Partie I 



Pour alter plus loin 

Comme nous l'avons indique tout au long de ce chapitre, JavaScript ne definit pas de 
mecanisme uniformise, standardise et integre au langage permettant de mettre en oeuvre 
les concepts de la programmation orientee objet. Le langage ne supporte pas non plus 
tous les mecanismes de ce paradigme. 

Aussi est-il necessaire de modulariser les traitements arm d'enrichir des classes existantes 
et de mettre en ceuvre l'heritage. Certaines techniques peuvent egalement simuler des 
mecanismes tels que les packages. 

La comprehension de la gestion de la me moire par l'interpreteur JavaScript est capitale 
pour minimiser la consommation memoire des applications developpees avec ce langage 
et eviter des fuites memoire. 



Enrichissement de classes existantes 

JavaScript fournit une multitude d'objets predefinis, tels que String et Number. Avec 
l'attribut prototype, il est possible d'enrichir des classes existantes sans avoir a modifier 
leur code. Ce mecanisme simple consiste a ajouter des methodes a cette propriete. 

La fonction extends suivante peut etre creee a cet effet : 



function extends(destination, source) { 
fort property in source ) { 

des ti nation. prototype [property] 



source[property] ; 



return destination; 



) 



Le code suivant illustre l'utilisation de cette fonction afin d'ajouter des methodes a la 
classe String de JavaScript : 



extendstString, { 

maMethode: function(_param) { 
return (...); 

}, 

monAutreMethode: functionO { 
return (...); 

} 
} 

var maChaine = new StringCma chaine"); 
maChaine.maMethodeC'mon parametre") ; 



Notons que la methode Object. extends de la bibliotheque prototype met en oeuvre ce 
mecanisme afin de copier des attributs et des methodes. L'utilisation de l'attribut proto- 
type des objets est recommandee lors de son utilisation. 
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Determination du type d'un objet 

Nous avons vu au chapitre precedent que l'utilisation du mot-cle typeof n'etait pas d'une 
grande utilite lors de l'utilisation d'objets puisqu'il retourne la valeur object quel que soit 
le type de l'objet. 

Le langage JavaScript fournit le mot-cle instanceof pour determiner si une instance 
correspond a un type. 

Le code suivant en donne un exemple d'utilisation avec la classe Stri ng : 

String chaine = "Ceci est un test"; 

// Affiche « object » 

alert( "typeof chaine : "+(typeof chaine)); 

// Affiche « true » 

alert( "chaine instanceof String : "+(chaine instanceof String)); 

Dans le cas d'un heritage entre differentes classes, ce mot-cle permet egalement de deter- 
miner si une classe est une instance d'une classe mere. Cette fonctionnalite n'est toute- 
fois supportee que lorsque l'heritage est realise par 1' initialisation de l'attribut prototype 
avec le constructeur de la classe mere. 

Le code suivant illustre l'utilisation du mot-cle instanceof dans le cadre de l'heritage : 

function StringBuffer( ) { 

(...) 
} 
function ExtendedStringBuffer( ) { 

(...) 
} 

ExtendedStringBuffer. prototype - new StringBuffer( ) ; 
var sb = new ExtendedStringBuffer( ) ; 
// Affiche « true » 
alert("sb instanceof StringBuffer : " 

+(sb instanceof StringBuffer)); 
// Affiche « true » 
alert("sb instanceof ExtendedStringBuffer : " 

+(sb instanceof ExtendedStringBuffer)); 

Dans le cas d'une recopie de methodes d'une classe mere vers une classe fille, le mot-cle 
instanceof ne peut etre utilise, comme le montre le code suivant : 

function StringBuffer( ) { 

(...) 
} 
function ExtendedStringBuffer( ) { 

(...) 
} 
for( var element in StringBuffer. prototype ) { 

ExtendedStringBuffer. prototype [element] = StringBuffer. prototype [element] ; 
} 
var sb = new ExtendedStringBuffer( ) ; 
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II Affiche « false » 

alertC'sb instanceof StringBuffer : " 

+(sb instanceof StringBuffer)); 
// Affiche « true » 
alertC'sb instanceof ExtendedStringBuffer : " 

+(sb instanceof ExtendedStringBuffer)); 

Le mot-cle instanceof ne dormant pas les memes resultats suivant la facon de le mettre en 
oeuvre, il doit etre utilise avec prudence dans le cadre de l'heritage. 



Support des bibliotheques JavaScript 

La mise en oeuvre des concepts de la programmation objet en JavaScript n'est pas intuitive 
et necessite de bien comprendre certains mecanismes du langage. 

Le recours a des bibliotheques permet de reduire cette complexite de mise en oeuvre, 
voire d'offrir parfois des approches plus orientees objet. 

La bibliotheque prototype offre, par exemple, un style different pour creer des classes et 
lamefhode Object, extend pour l'heritage. dojo offre pour sa part les methodes do jo. declare 
et dojo. inherits afin de modulariser les traitements relatifs a la mise en oeuvre de 
T heritage. Nous reviendrons plus en detail sur ces mecanismes et methodes aux chapi- 
tres 6 et 7. 

Signalons enfin la bibliotheque xbObjects, dont l'objectif est de fournir des mecanismes 
davantage orientes objet afin de mettre en oeuvre ce paradigme de programmation. Nous 
ne detaillons pas cet outil dans l'ouvrage, mais sa documentation est disponible sur le site 
de son createur, Bob Clary, a l'adresse http://bclary.com/log/2002/12/14/. 



Structuration en packages 

JavaScript n'offrant pas de support pour les packages, il est possible de simuler ce mecanisme 
avec le nom des classes. 

Le code suivant montre comment specifier le package lang (reperes O) pour la classe 
StringBuffer precedemment decrite : 

function lang.StringBuffert ) {<-0 

this.chaineslnternes = []; 
} 
lang. StringBuffer. prototype. append = function(chaine) {<-© 

thi s.chaines Internes. pus h(chaine) ; 
}; 
lang. StringBuffer. prototype. clear - functionO {<-© 

this.chaineslnternes . spl ice(0, this.chaineslnternes .length) ; 
}; 
lang. StringBuffer. prototype. toString = functionO {<-0 

return this.chaineslnternes. joint"") ; 
}; 
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L'utilisation de cette classe se fait desormais de la maniere suivante : 

var sb = new 1 ang.StringBuffer( ) ; 
sb.append( "premiere chaine"); 
sb.appendC et "); 
sb.append( "deuxieme chaine "); 
var resultat = sb.toString( ) ; 

Portee des attributs et methodes 

La portee des variables en JavaScript suit des regies bien precises. 

Par exemple, une variable definie avec le mot-cle var est visible dans tout le bloc la contenant 
et apres sa declaration. Son utilisation en dehors de celui-ci genere une erreur, comme 
dans le code suivant : 

function test( ) { 

var maVariable = "test"; 

alert(maVariable) ; //Affiche le contenu de la variable 
} 

testO ; 
alert(maVariable) ; //Genere une erreur 

Si le mot-cle var n'est pas specifie, nous pourrions penser qu'il s'agit d'une variable 
globale pour le script. En fait, JavaScript rattache toujours ce type de variable a un objet. 
Si rien n'est precise, la variable est automatiquement rattachee a l'objet window de la 
page HTML. 

Le code suivant illustre ce mecanisme : 

I maVariable = "une variable"; 
alert(maVariable) ; 
alert (window. ma Variable) ; 

Les entites maVariable et window. maVariable sont toutes definies et contiennent la meme 
valeur. 

JavaScript offre egalement une fonctionnalite interessante permettant de rattacher toutes 
les variables a un objet dans un bloc de code. Ce mecanisme peut etre mis en oeuvre par 
l'intermediaire du mot-cle wi th, comme dans le code suivant : 

(...) 

var monlnstance = new ObjectO; 

with(monlnstance) { 

monAttribut = "Un attribut"; 
} 

alert( "monAttribut : "+monInstance. monAttribut) ; //Affiche la valeur de 1 'attribut 
alert( "monAttribut : "+monAttribut) ; //Genere une erreur 

L'utilisation de cette fonctionnalite allege l'ecriture de code JavaScript en cas d'utilisation 
des attributs d'un objet non prefixes avec l'instance. 
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Notons que with ne peut s'utiliser qu'avec des attributs, et non avec des methodes, comme 
le montre le code suivant : 

(...) 

var monlnstance = new ObjectO; 

with(monlnstance) { 

maMethode = functionO { 
return "Une valeur"; 

} 
} 
alertC'methode : "+monInstance.maMethode( ) ) ; //Genere une erreur 

Le probleme des fuites memoire 

Le developpeur doit avoir conscience que l'utilisation du mot-cle new permet d'allouer de 
la memoire. De maniere similaire au langage Java, JavaScript possede un mecanisme de 
liberation de la memoire non utilisee. Ce dernier est mis en ceuvre par l'intermediaire 
d'un ramasse-miettes (garbage collector). II detecte les zones memoire qui ne sont plus 
referencees par aucun objet et les libere. 

Ce type de mecanisme offre la fausse impression de ne plus avoir a gerer la memoire. La 
realite est toute autre. Des fuites memoire peuvent toujours survenir, car les applications 
peuvent influer indirectement sur la facon dont l'interpreteur gere la memoire. 

Contrairement a Java, JavaScript possede le mot-cle del ete, qui permet de forcer la libe- 
ration de la memoire allouee par un objet. 

Deux problemes courants sont sources de fuites memoire. Le premier provient de classes 
utilisant des variables globales a une page. Ces dernieres peuvent etre, par exemple, des 
elements de l'arbre DOM de la page courante. En ce cas, ces classes ne sont liberees qu'a 
la fermeture de la page. 

Le code suivant fournit un exemple de ce probleme : 

function MaClasse( ) { 

this.elementDOM = document. getElementByldC'monld") ; 

(...) 
} 

Le second probleme peut etre specifique a un navigateur. Par exemple, Internet Explorer 
comporte un bogue dans son ramasse-miettes qui empeche la liberation des objets de la 
page qui font partie de referencements circulaires par l'intermediaire des closures. 

Une reference circulaire pour un objet correspond a une reference indirecte sur lui-meme. 
Par exemple, un objet objetl reference un objet objet2 qui reference lui-meme objetl. 
Lorsqu'une application utilise les evenements conjointement avec les closures, ce type 
de dysfonctionnement peut facilement survenir. 

Le code suivant donne un exemple generant une fuite memoire avec Internet Explorer (la 
fonction f i reOnLoad est attachee a l'evenement de chargement de la page HTML) : 
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function fireOnLoadO ( 

var bouton = document. getElementById( "monBouton" ) ; 
bouton.onCl ick = functionO {<-© 

alert( "Valeur du bouton : "+this.getValue( ) ) ; 



) 



La fuite memoire se situe au niveau du repere O. L'instance bouton reference une fonction 
anonyme, qui est une closure et qui reference elle-meme l'instance du bouton par l'inter- 
mediaire du mot-cle this. 

II est en ce cas recommande soit de ne pas utiliser de closures, soit de bien dereferencer 
tous les evenements associes a un objet. 

La code suivant utilise la premiere approche afin de corriger le probleme : 

function handled ick( ) { 

alert( "Valeur du bouton : "+this.getVal ue( )) ; 
} 
function fireOnLoadO { 

var bouton = document. getElementById( "monBouton" ) ; 

bouton.onCl ick = handleClick; 
} 

Le suivant illustre la maniere de bien liberer les fonctions de gestion d'evenements (la 
fonction f i reOnUnLoad est attachee a l'evenement de liberation de la page HTML) : 

function fi reOnllnLoad( ) { 

var bouton = document. getElementById( "monBouton" ) ; 
bouton.onCl ick = null ; 



Conclusion 



Le langage JavaScript n'est pas un langage oriente objet. Bien qu'il permette l'utilisation 
d'objets et dispose d'objets natifs, il n'offre pas d'elements de langage supportant ce 
paradigme. II permet cependant d'emuler les differents principes de la programmation 
orientee objet en se fondant sur les fonctions et les closures, ainsi que sur le mot-cle this 
et l'attribut prototype des fonctions. 

Plusieurs techniques permettent de mettre en oeuvre des classes et des objets ainsi que 
l'heritage. Ces techniques ne sont cependant pas toutes equivalentes et supportent plus 
ou moins bien les differents concepts de la programmation orientee objet. Certaines 
d'entre elles ne supportent pas, par exemple, la visibilite privee ni l'heritage multiple. De 
plus, elles induisent un comportement different pour le mot-cle instanceof. 

L'un des avantages de cette mise en oeuvre du paradigme objet par JavaScript est qu'elle offre 
beaucoup de flexibilite. II est, par exemple, possible de modifier dynamiquement au cours de 
l'execution la structure des classes utilisees, et ce, meme apres leurs instanciations. 
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L' utilisation des mecanismes objet de JavaScript pour developper des applications offre 
done de reels avantages en terme de structuration, de robustesse et de modularite du code. 

Tous les principes et mecanismes decrits dans ce chapitre sont frequemment utilises dans 
les frameworks et bibliotheques Open Source JavaScript. 



4 



Programmation DOM 



Avant la standardisation du DOM, chaque navigateur Web implementait ses propres 
methodes afin de manipuler les elements des pages HTML. Cela se traduisait par autant 
d'API qu'il y avait de navigateurs. Le code JavaScript etait des lors tres difficilement 
portable sur 1' ensemble des navigateurs. 

Ann d'harmoniser ces differences, un groupe de travail du W3C s'est donne pour mission 
de specifier une API de manipulation de l'arbre DOM. 

L'API du DOM (Document Object Model) permet d'acceder a une page Web et de mani- 
puler son contenu, sa structure ainsi que ses styles. Le DOM fournit pour cela une repre- 
sentation objet normalised des documents, dont le contenu est arborescent. Ces derniers 
peuvent etre des pages HTML ou des documents XML. 

Les specifications du DOM sont independantes de tout langage de programmation. Elles 
comportent differentes versions, appelees niveaux. Dans le cadre de notre ouvrage, nous 
detaillons son utilisation avec le langage JavaScript. 

Specifications du DOM 

A ce jour, trois specifications du DOM ont ete definies, correspondant a differents 
niveaux d'evolution, appeles 1, 2 et 3. Le niveau fait reference a des fonctionnalites 
non specifiees formellement et utilisees initialement par Internet Explorer 3.0 et Netscape 
Navigator 3.0. 

Apparu en 1998, le DOM niveau 1 est en partie implemente dans les versions 5 d'lnternet 
Explorer et 6 de Netscape Navigator. Ce niveau permet la manipulation d'un document HTML 
ouXML. 
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Le DOM niveau 2, puttie en 2000, apporte de nouvelles fonctionnalites, notamment l'ajout 
de vues filtrees, la gestion des evenements et des feuilles de style et de nouvelles methodes de 
parcours de l'arbre. Ce niveau correspond a la derniere version finalisee de la specification. 

Le DOM niveau 3 est en cours de specification. II ajoute une interface permettant les 
operations de chargement et de sauvegarde du document sous forme XML. II offre egale- 
ment la possibility d'utiliser des expressions XPath afin d'executer des requetes de 
recherche dans l'arbre. II supporte en outre les espaces de nommage de XML. 

Support par les navigateurs Web 

Les navigateurs Web sont apparus bien avant la normalisation du DOM. De ce fait, leur 
support du DOM prend plus ou moins en compte les niveaux des specifications et 
comporte generalement des extensions proprietaires non normalisees. 

Pour des raisons de portability des applications, l'appel des methodes des extensions 
proprietaires est deconseille. II est cependant parfois inevitable lors du developpement de 
certaines fonctionnalites. Dans ce cas, il est preferable d'utiliser une couche d'abstrac- 
tion afin de garantir le portage et de ne plus avoir a se soucier des problemes d'incompa- 
tibilite entre navigateurs. 

Le tableau 4. 1 recapitule le support du DOM par les principaux navigateurs HTML. 
Tableau 4.1 Support des specifications du DOM par les navigateurs 



Navigateur 


Description 


Internet Explorer 5+ 


Support partiel du niveau 1 


Mozilla/Firefox 


Support des niveaux 1 et 2 et partiel du niveau 3 


Opera 7+ 


Support des niveaux 1 et 2 et partiel du niveau 3 


Safari 


Support des niveaux 1 et 2 



Structure du DOM 

Pour detailler la structure d'un arbre DOM ainsi que ses entites de base, nous nous 
appuyons sur les fonctionnalites presentes dans les niveaux 1 et 2 du DOM. 

Tout langage de balises possede une structure logique arborescente dont la representation 
objet correspond au DOM. Cette derniere fournit des methodes permettant de parcourir 
cet arbre et eventuellement de le modifier. 

Afin de detailler la structure du DOM, nous recourons tout au long des sections suivantes 
a un exemple simple de fragment HTML, qui comprend une balise racine div contenant 
deux blocs HTML, l'un delimite par la balise span et l'autre par une autre balise di v : 

<di v id="maZone"> 

<span><b>Un texte</b></span> 

<di v id="monAutreZone"> 
Un autre texte 

</div> 
</div> 
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Ce fragment de code HTML correspond a la structure hierarchique illustree a la 
figure 4.1. L'objet document en est la racine. Lesbalises HTML sontreliees entreelles par 
des relations parent ou enfant. 





Document 












Element div 






















Element span 




Element div 




Attribut name 


T 










Element b 




Element de type texte 












Element de type texte 





Figure 4.1 

Structure de I'arbre DOM du code HTML 

Avec le DOM, chacune des balises HTML possede une representation objet correspon- 
dant a son nom. Dans l'exemple ci-dessus, la balise div est representee par un objet de 
type HTMLDivElement et la balise span par HTMLSpanElement. 

Nous pouvons remarquer que les noeuds peuvent etre de differents types. Dans notre exemple, 
le deuxieme nceud represente une balise et le cinquieme un attribut de cette derniere. 



La classe Node 

La classe centrale representant un nceud DOM est Node. Elle definit differentes proprietes 
afin de donner acces aux informations relatives au nceud, telles que son type et son nom. 

Le tableau 4.2 recapitule les principales proprietes de la classe Node. 
Tableau 4.2 Proprietes de la classe Node 

Propriete Description 

attributes Attributs du nceud 

nodeName Nom de la balise du nceud 

nodeType Type du nceud (voir la section suivante) 

nodeVal ue Valeur de la balise. Cette valeur peut etre nulle lorsque aucune valeur n'est associee a la balise. 

ownerDocument Reference le document representant I'arbre DOM dans lequel se trouve le nceud. 
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Dans notre exemple de fragment HTML, la balise identifiee par maZone est une div. La 
valeur de sa propriete nodeType est 1. 

Cette classe va de pair avec les classes NodeLi st et NamedNodeMap, qui definissent des 
collections de nceuds. Ces dernieres sont utilisees lorsque des methodes de manipulation 
de l'arbre DOM renvoient plusieurs nceuds ou attributs. 

Differentes syntaxes permettent de parcourir une liste de nceuds, dont la plus simple consiste 
a utiliser la liste a la maniere d'un tableau, comme dans 1' exemple suivant : 

var elements = (...) 

fort var cpt=0; cpt<elements .length; cpt++ ){ 

var element = elements[cpt] ; 

(...) 
} 

Une autre solution, plus orientee objet, consiste a utiliser la methode i tern sur l'objet NodeLi st 
de la maniere suivante : 

var elements = (...) 

fort var cpt=0; cpKelements .length; cpt++ ){ 

var element = elements. item(cpt) ; 

(...) 
} 

La classe NamedNodeMap est similaire a NodeLi st en ce qu'elle represente une liste de nceuds. 
Les elements de cette derniere sont toutefois stockes par cle. Le code suivant en donne un 
exemple d' utilisation avec des attributs : 

var attributs = (...) 

fort var cpt=0; cpt<attributs. length; cpt++ ){ 

var attribut = attributs .itemtcpt) ; 

var nomAttribut = attribut. name; 

var valeurAttribut = attribut. val ue; 

(...) 
} 

Nous detaillons dans la suite du chapitre les differentes techniques permettant de recuperer 
une liste de nceuds et d' attributs. 

La classe Node definit en outre des proprietes referencant d'autres nceuds de l'arbre. Nous 
verrons que ces dernieres peuvent se reveler tres utiles pour implementer une navigation 
relative au nceud. 

Types des nceuds 

Un arbre DOM regroupe un ensemble de nceuds representant differentes entites. Comme la 
classe Node est generique, elle contient une propriete nodeType dont la valeur est un entier. 

Ann de faciliter l'utilisation de la propriete nodeType, la classe Node definit les constantes 
recapitulees au tableau 4.3. 
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Tableau 4.3 Constantes de la classe Node def inissant les types de noeuds 



Constante 


Valeur 


Description 


ATTRIBUT_NODE 


2 


Attribut d'une balise de I'arbre 


C0MMENT_N0DE 


8 


Balise de commentaire 


DOCUMENT_FRAGMENT_NODE 


11 


Nceud racine d'un fragment d'arbre 


D0CUMENT_N0DE 


9 


Noeud racine de I'arbre. II s'agit du type de I'objet document. 


ELEMENT_NODE 


1 


Balise de I'arbre 


TEXT_N0DE 


3 


Nceud texte de I'arbre 



D0CUMENT_N0DE est le type du noeud racine de I'arbre DOM d'une page HTML. Cet element 
est represents par I'objet document de la page. 

Dans notre exemple, la balise d'identifiant maZone est de type ELEMENT_NODE, et son attribut 
id de type ATTRIBUT_NODE. Le texte « un autre texte » est de type TEXT_N0DE. 

Manipulation des elements 

Nous allons a present detailler les differentes API permettant de manipuler les elements 
d'un arbre DOM. 

Toutes les techniques decrites dans cette section correspondent au niveau 1 de la specifi- 
cation. 

Acces direct aux elements 

Pour acceder au noeud d'un document afin de pouvoir le manipuler par la suite, une methode 
simple consiste a identifier ce noeud par un attribut id. La methode getEl ementByld de I'objet 
document peut ensuite se fonder sur ce dernier pour recuperer l'instance correspondante. 

La balise di v de notre bloc HTML exemple peut etre referencee de la facon suivante : 

var zone = document. getElementByldC'maZone") ; 

Puisque l'identifiant d'une balise doit etre unique dans une page HTML, la methode 
getEl ementByld renvoie un unique element. 

D'autres methodes permettent de recuperer un ensemble de references sur des noeuds en 
se fondant soit sur I'objet document, soit sur un objet representant un noeud. 

La methode getEl ementsByTagName, permet de recuperer une liste de noeuds en se fondant 
sur le nom des balises, lequel correspond a la valeur de la propriete nodeName de la classe 
Node decrite precedemment. 

La methode getEl ementsByTagName peut s'appliquer sur I'objet document ou sur un objet 
ntEud, comme dans le code suivant : 

var balisesDiv = document. getElementsByTagNameC'div" ) ; 
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Ce code permet de recuperer 1' ensemble des balises div d'un document sous la forme 
d'une liste de nceuds (NodeList). La valeur * peut etre utilisee comme argument afin de 
recuperer 1' ensemble des noeuds du document, comme dans le code suivant : 

var elements = document. getElementsBytagNameC'*" ) ; 

La methode getElementsByName retourne une liste de noeuds dont l'attribut name est egal a 
la valeur specifiee en parametre. 

Cette methode est particulierement appropriee lors de la manipulation de cases d' option 
(radio button) d'un formulaire HTML, comme dans l'exemple suivant : 

<form method="post" id="monFormul aire"> 

<input type="radio" name="couleur" val ue="rouge"/>Rouge<br/><-0 
<input type="radio" name="couleur" val ue="bleu"/>Bleu<br/><-© 
<input type="radio" name="couleur" val ue="jaune"/>Jaune<br/><-0 

</form> 

Le code JavaScript suivant permet de referencer directement les trois balises 1 nput (reperes O 
dans le code precedent) avec le support de cette methode : 

var elementslnput = document .getElementsByNameCcouleur" ) ; 

Les methodes getElementsByTagName et getElementsByName permettent de recuperer une 
liste de nceuds dans une hierarchie complete. Ces methodes parcourent l'ensemble de 
l'arbre a partir d'un nceud de maniere recursive. 

Acces aux elements a partir d'un nceud 

La classe Node permet de parcourir un arbre DOM relativement a un nceud precis. 

Elle possede a cet effet des proprietes specifiques qui permettent de referencer les nceuds 
autour du nceud courant. 

Le tableau 4.4 recapitule ces proprietes. 
Tableau 4.4 Proprietes de la classe Node relatives aux noeuds dependants 

Propriete Description 

chi 1 dNodes Represente la liste des nceuds enfants sous forme d'objet NodeLi st. La methode hasChi 1 dNodes permet de 

determiner si le noeud a des nceuds enfants. La propriete chi 1 dNodes ne contient pas les attributs du nceud. 

firstChild Reference le premier nceud enfant, correspondant au premier noeud de la liste chi 1 dNodes. 

lastChild Reference le dernier nceud enfant, correspondant au dernier nceud de la liste chi 1 dNodes. 

nextSibling Pointe sur I'enfant suivant dont le parent est identique. Elle contient null si le nceud est le dernier enfant. 

parentNode Reference le nceud parent. 

previousSibling Pointe sur I'enfant precedent dont le parent est identique. Elle contient null si le nceud est le premier enfant. 

Jusqu'a present, nous avons vu que l'acces aux nceuds consistait en la navigation au sein 
d'un objet NodeList. Les proprietes firstChild, lastChild, previousSibling et nextSibling 
permettent de s'abstraire de cette navigation en referencant directement certains noeuds. 
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Le code suivant donne un exemple de la facon d'acceder a ces noeuds : 

Ivar zone = document. getElementByldC'maZone") ; 
var span = zone.fi rstChild; <-0 
var div - zone.lastChild; <-© 

La variable du repere O reference la balise span et celle du repere © la balise di v. 

L'utilisation des proprietes previ ousSi bl 1 ng et nextSi bl i ng offre la possibilite de parcourir 
un arbre DOM, comme dans le code suivant : 

var zone = document. getElementByldC'maZone") ; 
var element = zone.fi rstChild; 
while( element!=nul 1 ){ 
(...) 
element = element.nextSibl i ng ; 



La propriete chi 1 dNodes permet de referencer les differents enfants directs d'un noeud. Le 
code suivant indique comment recuperer 1' ensemble des enfants du noeud d'identifiant 
ma Zone de notre fragment HTML : 

Ivar zone = document. getElementByldC'maZone") ; 
var enfants = zone.childNodes; 

Dans cet exemple, la variable enfants contient les noeuds relatifs aux balises span et div 
contenues dans la balise div d'identifiant maZone. 



Specif icite de l'utilisation de la propriete childNodes avec Firefox 

Dans le navigateur Firefox, la propriete chi 1 dNodes renvoie I'ensemble des espaces comprises entre les 
balises HTML sous la forme de noeuds de type texte (nodeType=TEXT_NODE). II faut done veiller a pren- 
dre en compte ces nceuds texte lors des traitements. 



Manipulation des noeuds 

DOM definit des methodes permettant de creer, d'ajouter, de remplacer ou de supprimer 
des noeuds de tout type. Ces methodes sont fournies par l'objet document, qui decline les 
methodes de creation pour tous les types de noeuds. 

Le code suivant fournit un exemple de creation d'une balise, d'un noeud de type texte et 
d'un commentaire HTML : 

Ivar element = document. createElement( "label ") ; 
var elementTexte = document. createTextNodeC'mon texte"); 
var commentaire = document. createComment( "mon commentaire"); 

Une fois le noeud cree, il ne reste plus qu'a l'attacher a un noeud existant en utilisant les 
methodes appendChild ou insertBefore, qui ajoutent un noeud enfant sous une balise. 
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Le code suivant se fonde sur notre code HTML exemple pour ajouter dynamiquement 
une balise 1 abel une fois la page chargee : 

var zone = document. getElementByldt "maZone") ; 
var label = document. createElementt "1 abel ") ; 
var texte = document. createTextNodet "mon label"); 
label . appendChi 1 d( texte) ; 
zone. appendChi 1 d( label ) ; 

Ce code permet de modifier l'arbre DOM en memoire de la page afin d'obtenir le resultat 
suivant : 

<di v id="maZone"> 

<span><b>Un texte</b></span> 

<di v id="monAutreZone"> 
Un autre texte 

</div> 

<label>mon label</label><-0 
</div> 

Le repere O met en valeur le bloc ajoute. Notons que la methode appendChild ne permet 
pas de specifier a quel endroit le noeud enfant est ajoute. Ce dernier est toujours ajoute a 
la fin de la liste des enfants. 

Lorsque nous souhaitons inserer dans un tableau une nouvelle ligne entre deux lignes 
existantes, l'utilisation de i nsertBef ore est requise. Dans l'exemple precedent, cette methode 
permet d'inserer la balise 1 abel directement en dessous de la balise di v d'identifiant maZone, 
comme dans le code suivant : 

var zone = document. getElementByldt "maZone") ; 

var autreZone = document. getElementByldt "monAutreZone") ; 

var label = document. createElementt "1 abel ") ; 

var texte = document. createTextNodet "mon label"); 

label . appendChi ld( texte) ; 

zone. insert Before (autreZone, label ) ; 

Cet exemple permet d'obtenir l'arbre DOM suivant : 

<div id="maZone"> 

<span><b>Un texte</b></span> 

<label>mon label</label> 

<div id="monAutreZone"> 
Un autre texte 

</div> 
</div> 

Tous les nouveaux nceuds que nous avons crees jusqu'a present utilisaient les differentes 
methodes createXXX de la classe Document. II est aussi possible d'obtenir un nouveau noeud 
par clonage d'un noeud existant, en utilisant la methode cloneNode. Le premier argument 
de cette methode est un booleen, qui permet d'indiquer si seul le noeud doit etre clone ou 
si le noeud ainsi que tous ses enfants doivent l'etre. 
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Le code suivant donne un exemple d'utilisation de la methode cl oneNode : 

Ivar zone = document. getElementByldC'maZone") ; 
var zoneClone = zone.cloneNode(true) ; // clonage complet 
var zonePartiel le = zone.cloneNode(fal se) ; // clonage uniquement de la balise div 

La methode removeChi 1 d permet de supprimer un nceud. Le code suivant donne un exemple 
de suppression de la balise div d'identifiant monAutreZone : 

Ivar zone = document. getElementByldC'maZone") ; 
var autreZone = document. getElementById( "monAutreZone") ; 
zone. removeChi Id(autreZone) ; 



Utilisation des fragments d'arbre 

Les fragments d'arbre permettent de travailler sur une portion de l'arbre. lis sont represented 
par l'objet DocumentFragment, qui peut etre considere comme un objet Document allege. II 
implemente toutes les methodes de la classe Node. 

Le code suivant permet de creer un nouveau fragment d'arbre : 

var fragment = document. createDocumentFragmentt ) ; 

Les fragments d'arbre sont tres utiles lorsqu'une nouvelle portion de l'arbre DOM doit 
etre ajoutee. 

Supposons que nous souhaitions ajouter sept paragraphes contenant le nom du jour de la 
semaine a la div de notre exemple. Les sept paragraphes peuvent etre crees dans un fragment 
d'arbre. Ce dernier peut ensuite etre ajoute sous la balise div. 

Le code suivant fournit un exemple de creation de paragraphes par l'utilisation d'un objet 

DocumentFragment : 



var zone = document. getElementByldC'maZone") ; 
var fragment = document. createDocumentFragment( ) ; 
var jours = ["Lundi", "Mardi", "Mercredi", "Jeudi" 
for (var i=0; i < jours. length; i++){ 

var paragraphe = document. createElementCP") ; 

var texte = document. createTextNode( jours[i] ) ; 

paragraphe. appendChild(texte) ; 

fragment. appendChild( paragraphe) ; 
} 
zone. appendChi 1 d( fragment) ; 

Ce code permet d'obtenir l'arbre DOM suivant : 

<div id="maZone"> 

<p>Lundi</p> 

<p>Mardi</p> 

<p>Mercredi</p> 

<p>Jeudi</p> 

<p>Vendredi</p> 

<p>Samedi</p> 

<p>Dimanche</p> 
</div> 



"Vendredi ' 



"Samedi", "Dimanche"]; 
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Lorsque le fragment de cet exemple est insere sous la balise di v, ses noeuds enfants sont 
inseres, mais pas le fragment lui-meme. Le fragment est utilise uniquement comme 
container et n'existe plus en tant que tel une fois qu'il a ete insere dans l'arbre DOM. 

Le resultat de cet exemple peut aussi etre obtenu sans utiliser de fragment d'arbre. Dans 
ce cas, des balises p sont inserees au fur et a mesure de leur creation sous la balise di v par 
des appendChi 1 d. Chacune des insertions dans l'arbre DOM provoque le rafraichissement 
complet de la page. Dans notre cas, la page est done rafraichie sept fois. 

En cas d'utilisation d'un fragment d'arbre, la page n'est rafraichie que lors de l'insertion 
du fragment dans le DOM. Lors de la construction du fragment, les nceuds sont unique- 
ment presents en memoire et ne sont pas affiches. lis ne sont reellement affiches qu'au 
moment de l'ajout du fragment sur le DOM de la page. 

L'utilisation de fragments d'arbre ameliore sensiblement les performances lors de l'insertion 
de plusieurs noeuds puisqu'elle reduit le nombre de rafraichissement du document HTML 
affiche. 



Manipulation des attributs 

Tout element du type NODE_ELEMENT peut contenir des attributs permettant de lui ajouter 
des informations. Un attribut possede une cle et une valeur, la valeur de la cle devant etre 
unique pour 1' element. 

Le code suivant met en oeuvre les attributs dans notre fragment HTML exemple : 

<di v id="maZone"> 

<span><b>Un texte</b></span> 

<di v id="monAutreZone"> 
Un autre texte 

</div> 
</div> 

i d est un attribut de la balise di v. La classe Node met a disposition la propriete attri butes afin 
de lister ses differents attributs. Cette propriete est du type NamedNodeMap, decrit precedemment. 

La classe Node fournit egalement l'ensemble de methodes recapitulees au tableau 4.5. 
Tableau 4.5 Methodes de manipulation des attributs de la classe Node 



Methode 


Parametre 








Description 


getAttribute 


Identifiant de I'attribut 








Reference un attribut d'un element en utilisant son identifiant. 


hasAttribute 


Identifiant de I'attribut 








Determine si un attribut est present pour un element. 


removeAttribute 


Identifiant de I'attribut 








Supprime un attribut pour un element. 


setAttribute 


Identifiant de I'attribut ains 


que 


sa 


valeur 


Cree un attribut ou remplace un attribut existant d'un element. 



La methode setAttribute offre la possibility d'ajouter un attribut a une balise. Le code 
suivant donne un exemple d'utilisation de cette technique afin d'ajouter un attribut 
d' identifiant type pour la premiere balise di v de notre fragment HTML : 
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Ivar zone = document. getElementByldC'maZone") ; 
zone.setAttribute( "type" , "UnType" ) ; 

La methode getAttribute donne acces a la valeur d'un attribut. Dans le cas ou l'attribut 
n'existe pas, la methode renvoie null. 

Le code suivant permet de recuperer la valeur de 1' attribut type precedemment ajoute : 

Ivar elt = document. getElementByldC'dl" ) ; 
var type = elt. getAttributet "type" ) ; 

Les methodes hasAttribute et removeAttribute permettent respectivement de verifier la 
presence d'un attribut et de supprimer un attribut, comme dans le code suivant : 

var zone = document. getElementByldC'maZone") ; 
if( zone.hasAttributeC'type") ) { 
zone.removeAttribute( "type") ; 
} 

Les attributs peuvent etre utilises sur des nceuds arm d'ajouter des donnees supplementaires 
accessibles pour les traitements sans impacter le rendu visuel. Ces attributs sont souvent 
utilises pour stacker des elements techniques sur le noeud. 



Parcours de I'arbre DOM 

Le DOM niveau 2 introduit de nouvelles fonctionnalites, appelees DOM Traversal et 
Range, permettant de parcourir un arbre DOM. Elles correspondent essentiellement aux 
classes Nodelterator et TreeWal ker. 

La classe Nodelterator est tres utile pour parcourir un arbre DOM. Nous allons utiliser le 
fragment suivant afin d'illustrer ses capacites de navigation : 

<div id="maZone"> 

<span><b>Un texte</b></span> 
<div id="monAutreZone"> 

<p>un paragraphe</p> 

<p>deuxieme paragraphe</p> 
</div> 
<div id="encoreUneZone"> 

<b>texte en gras</b> 
</div> 
</div> 

La classe Nodelterator permet de parcourir l'ensemble des nceuds de ce fragment par le 
biais d'une methode dite de parcours de I'arbre en prof ondeur pre fixe. 

Avant d'utiliser la classe Nodelterator, il faut la creer. II suffit pour cela d'utiliser la methode 
createNodelterator sur l'objet Document. Les arguments de cette methode de creation 
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permettent de definir les noeuds qui doivent etre explores. Ces arguments sont recapitules 
au tableau 4.6. 

Tableau 4.6 Arguments de la methode createNodelterator 



Argument 


Description 


root 


Un document ou un nceud a parcourir 


whatToShow 


Precise les types de noeuds qui doivent etre parcourus. Les valeurs possibles de 
cet argument sont recensees au tableau 4.7. 


filter 


Classe NodeFi 1 ter contenant les caracteristiques d'un filtre ou nul 1 si aucun filtre 
n'est necessaire. 


entityReferenceExtension 


Booleen indiquant si les entries referencees doivent etre explorees. 



Les valeurs les plus usuelles de 1' argument whatToShow sont recapitulees au tableau 4.7. 
Tableau 4.7 Principales valeurs de I'argument whatToShow 



Valeur 


Description 


NodeFi 1 ter. SH0W_ALL 


Retourne tous les noeuds. 


NodeFi 1 ter. SH0W_C0MMENT 


Retourne uniquement les noeuds de type C0MMENT_N0DE. 


NodeFilter.SHOW_ELEMENT 


Retourne uniquement les noeuds de type ELEMENT_NODE. 


NodeFilter.SHOW_TEXT 


Retourne uniquement les noeuds de type TEXT_N0DE. 



Le code suivant donne un exemple de creation d'un objet Nodelterator : 

Ivar zone = document. getElementByldC'maZone") ; 
var parcours = document. createNodeIterator(zone, NodeFilter.SHOW_ELEMENT, null, false); 

II ne reste plus qu'a se deplacer dans l'objet Nodelterator en utilisant les methodes nextNode 
ou previousNode. 

L exemple ci-dessous indique comment utiliser ces deux methodes : 

Ivar monSpan = parcours. nextNode( ) ; 
var maBaliseB = parcours .nextNode( ) ; 

A ce stade, l'appel de la methode previ ousNode permet de revenir sur le noeud representant la 
balise span : 

var encoreMonSpan = parcours .previousNode( ) ; 

Le code suivant donne un exemple de parcours complet de notre fragment HTML de depart : 



var zone = document. getElementByldC'maZone") ; 

var parcours = document. createNodeIterator(zone, NodeFilter.SHOW_ELEMENT, nul 

var sortie ; 

var niEud = parcours. nextNode( ) ; 

while (n<Eud){ 

sortie += noeud. nodeName + " "; 

noeud = parcours. nextNode( ) ; 
} 



false) 



Programmation DOM 



Chapitre 4 



La variable sortie contient la chaine SPAN B DIV P P DIV B. 



Jusqu'a present, nous n'avons pas utilise la classe NodeFilter. Cette derniere permet 
d'aj outer un riltre supplementaire permettant d'exclure certains nceuds lors du parcours 
de l'arbre. Cette classe est definie par une unique methode acceptNode. Le code de retour 
de cette methode permet de rejeter ou de garder le nceud dans le Nodelterator. 

La creation d'un objet NodeFi 1 ter est tres simple, comme le montre le code suivant : 

Ivar oFilter = new ObjectO ; 
oFil ter. acceptNode = function (oNode)O 

La fonction acceptNode doit retourner la valeur NodeFilter.FILTER_REJECT ou NodeFi 1- 
ter.FILTER_ACCEPT arin d'indiquer si le noeud passe en argument doit faire partie ou non 

du Nodelterator. 

A partir de notre fragment de code HTML, il est possible de ne garder dans un Nodelte- 
rator que les balises p, comme dans le code suivant : 

var oFilterP = new ObjectO; 
oFilterP. acceptNode = function (oNodeM 
if (oNode.nodeName == "P"){ 

return NodeFilter. FILTER_ACCEPT; 
) else ( 

return NodeFilter. FILTER_REJECT; 
) 
} 

II ne reste plus qu'a creer un Nodelterator a partir de ce filtre : 

var parcours = document. createNodelteratortzone, NodeFilter. SH0W_ALL, oFilterP, false); 

II est egalement possible de parcourir un arbre DOM en utilisant la classe TreeWalker. 
Cette derniere offre les memes fonctionnalites que la classe Nodelterator mais comporte 
des methodes de deplacement supplementaires. 

La methode createTreeWalker de l'objet document permet de creer un TreeWalker (cette 
methode de creation porte la meme signature que son homologue CreateNodelterator) : 

var walker = document. createTreeWal ker(zone, NodeFilter. SHOW_ELEMENT, null, false); 

Les methodes permettant de naviguer dans un TreeWal ker sont recensees au tableau 4.8. 

Tableau 4.8 Methodes de navigation de la classe TreeWalker 

Methode Description 

f i rstChi 1 d Retourne le premier enfant du noeud courant. 

lastChild Retourne le dernier enfant du nceud courant. 

nextNode Retourne le nceud suivant (identique a Nodelterator. nextNode). 

nextSibling Retourne I'enfant suivant dont le parent est identique au nceud courant. 

parentNode Retourne le nceud parent du nceud courant. 

previousNode Retourne le nceud precedent (identique a Node Iterator, previous Node). 

previousSibl ing Retourne I'enfant precedent dont le parent est identique au nceud courant. 
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Le code suivant fournit un exemple a" utilisation de ces methodes : 

var walker = document. createTreeWal kertzone, NodeFil ter.SHOW_ELEMENT, null, false); 

var monSpan = wal ker.fi rstChild( ); <-© 

var divMonAutreZone = wal ker.nextSibl ing( ) ; <-© 

var premierP = wal ker.fi rstChildt ) ; 

La ligne identifiee par le repere O permet de recuperer la balise span. La balise di v portant 
1'identiriant monAutreZone est recuperee au repere ©. 

Les classes Nodelterator et Treewal ker simplifient le parcours d'un arbre DOM en offrant 
deux niveaux de nitre. Le premier, whatToShow, est un nitre sur le type de noeud, et le second, 
NodeFilter, un nitre defini par programmation. 

Notons que ces classes ne sont pas supportees par Internet Explorer. 



L'attribut innerHTML 

Bien que l'attribut innerHTML, present sur les noeuds d'un arbre DOM, ne soit pas normalise 
par le W3C, cet ouvrage se doit de le presenter. Cet attribut permet en effet de remplacer 
completement le contenu d'un element par celui specifie dans une chaine de caracteres. 

Le code ci-dessous donne un exemple d'utilisation de l'attribut innerHTML arm de 
remplacer le contenu de la balise span definie en debut de chapitre par un ensemble 
de balises HTML : 

I var zone = document. getElementByldt "maZone") ; 
var span = zone.getElementsByTagName("span")[0] ; 
span. innerHTML = "<p><b>mon texte</b></p>" ; 

Ce code permet de modifier 1' arbre DOM en memoire de la page afin d'obtenir le resultat 
suivant : 

<div id="maZone"> 

<span><p><b>Un texte</bX/pX/span><-0 

<div id="monAutreZone"> 
Un autre texte 

</div> 
</div> 

Le repere O met en valeur le bloc modifie. Nous constatons qu'une balise p a ete ajoutee 
autour de la balise b. 

L' utilisation de l'attribut innerHTML sur un element est particulierement tentante, 
puisqu'elle evite de multiples appels a la methode appendChild et autant de creations de 
nouveaux noeuds. Elle force cependant a construire des chaines de caracteres contenant 
un ensemble de balises ainsi que leurs proprietes (evenements, styles, etc.) sous la forme 
de multiples concatenations de chaines. Or ces chaines nuisent a la maintenabilite du 
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code JavaScript et peuvent conduire a des syntaxes HTML invalides. De plus, l'utilisation 
de cette methode rompt la structuration definie dans les specifications du DOM. 

Au vu de ces considerations, l'utilisation de cette methode n'est recommandee que dans 
des cas bien particuliers, et il ne faut surtout pas en abuser. 

L'attribut innerHTML peut etre invoque pour resoudre des problemes de performance resul- 
tant de l'ajout d'un grand nombre de noeuds. Cette problematique de performance peut 
egalement etre resolue par l'utilisation de fragments d'arbre. Dans la quasi-totalite des 
navigateurs Web, l'utilisation de l'attribut innerHTML est beaucoup plus performante que 
celle de la methode appendChi 1 d pour ajouter de nouveaux noeuds a l'arbre DOM. 

Nous allons illustrer l'utilisation des deux approches. 

La premiere correspond a l'utilisation des methodes du DOM arm de creer dynamique- 
ment un tableau compose de trois cents lignes : 

var nbLigne = 3000; 

var zone = document. getElementByldC'maZone") ; 

var el ementTabl eau = document. createElementC "table") ; 

var elementTBody = document. createElementC'tbody") ; 

el ementTabl eau. appendChi 1 d(el ementTBody ) ; 

var elementTr = document. createElementC'tr") ; 

var elementTd = document. createElementC'td") ; 

var elementDonnees = document .createTextNode( "Mes donnees"); 

for( var cpt=0; cpt<nbLigne; cpt++ ){ 

var tmpElementTr = elementTBoby .appendChild(elementTr.cloneNode(true) ) ; 

var tmpElementTd = tmpElementTr. appendChild(elementTd. cloneNode(true) ) ; 

tmpElementTd. appendChi ld( el ementDonnees.cloneNode( true) ) ; 

} 
zone. appendChi ld( el ementTabl eau) ; 

La seconde correspond a l'utilisation de l'attribut innerHTML afin de mettre en oeuvre la 
meme fonctionnalite : 

var nbLigne = 3000; 

var zone = document. getElementByldC'maZone") ; 

var html = new Array( ) ; 

html .push("<table><tbody>"); 

for( var cpt=0; cpt< nbLigne;cpt++ ){ 

html .push( "<tr>") ; 

html .push( "<td>Mes donnees</td>") ; 

html .push("</tr>"); 
} 

html .push("</tbody></table>"); 
zone. innerHTML = html . joinC" ) ; 

Les temps de reponse d'affichage du tableau sont nettement superieurs avec l'attribut 

innerHTML. 
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Utilisation du DOM niveau 

Comme indique precedemment, le DOM niveau n'est pas normalise par le W3C. II 
correspond a la premiere implementation par les navigateurs Web de l'acces aux objets 
d'un document HTML. 

Ce DOM niveau permet d'acceder a differents elements d'un document HTML par 
1' intermediate de proprietes de l'objet document. Par exemple, la propriete forms permet 
de recuperer toutes les balises form contenues dans une page Web. 

Le code suivant indique comment utiliser la propriete forms : 

var mesFormulaires = document. forms; 

for (var 1=0 ; i < mesFormulaires. length ; i++){ 

var formulaire - mesFormulai res[i ] ; 
} 

De la me me maniere, toutes les images d'un document sont accessibles par le biais de la 
propriete images : 

var meslmages = document .images; 

for (var i=0 ; i < meslmages .length ; i++){ 

var image = meslmages[i] ; 
} 

La propriete 1 inks permet de recuperer tous les liens (balise a) d'un document. 

Bien que le DOM niveau ne soit pas normalise, les dernieres versions des navigateurs 
implementent en partie l'acces a ses proprietes. II est cependant recommande de ne pas 
les utiliser et de leur preferer la methode getEl ementsByTagName. 

Les proprietes document. forms et documents. images peuvent etre remplacees par le code 
suivant : 

■var mesFormulaires = document. getEl ementsByTagName( "form") ; 
var meslmages = document. getEl ementsByTagNameC'img" ) ; 



Modification de I'arbre DOM au chargement 

Comme nous l'avons vu jusqu'a present, le DOM permet de manipuler la structure d'une 
page HTML. II faut toutefois garder a 1' esprit que le DOM n'est accessible que lorsque la 
page est chargee dans sa globalite. Les traitements sur I'arbre DOM doivent done etre 
effectues apres le declenchement de l'evenement onload du document afin de garantir la 
presence de tous les elements. 

Le DOM peut egalement etre utilise pour modifier le contenu d'une page HTML apres 
son chargement. Cette fonctionnalite se revele particulierement pratique pour la cons- 
truction de widgets a partir de leur description dans la page. 

Pour mieux comprendre la modification de I'arbre DOM au chargement, nous allons 
l'illustrer par un exemple concret, dans lequel nous souhaitons remplacer les boutons 
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standards definis par la balise input par une balise div arm d'ameliorer l'esthetique des 
boutons. 

L'exemple suivant indique comment remplacer des boutons au chargement de la page : 

<html> 
<head> 

<script language="text/javaScript"> 
function rempl aceBouton( ){ 

var olnputs = document. getElementsByTagName( "input") ; 
for (var i=0; i < olnputs. length; i++){ 
var olnput = olnputs. itemti ) ; 
if (olnput. getAttributeC'type" ) == "button"){ 
// construction du nouveau bouton 
var oDiv = document. createElementC'di v") ; 
oDiv. style. border = "lpx solid blue"; 
var t = document. createTextNode(oInput. val ue) ; 
oDiv.appendChild(t) ; 
// modification d'une noeud existant 
olnput. pa rentNode. repl aceChildtoDiv, olnput) ; 



</script> 
</head> 

<body on load=" rempl aceBouton( )"> 
<hl>remplacement des boutons par des div</hl> 
<input type="button" value="mon action"/><-© 
</body> 
</html> 

Dans ce code, la methode rempl aceBouton est executee lorsque la page est completement 
chargee. Elle recupere toutes les balises i nput de type button arm de les remplacer par une 
balise div. 

Apres le chargement de la page, la balise du repere O devient : 

<div style="border : lpx solid blue">mon action</div> 

Cet exemple de modification du DOM au chargement est des plus simple. Des cas plus 
complexes peuvent etre traites de la meme maniere. II est notamment possible de decrire 
les elements graphiques constituant l'interface homme machine (IHM) par des balises 
non interpreters par le navigateur Web. Elles sont ensuite prises en compte apres le char- 
gement complet de la page arm d'obtenir le rendu visuel des composants graphiques. 
C'est ce principe qu'utilise la bibliotheque dojo pour construire ses widgets. 

L'exemple de code suivant construit un widget de type tableau au chargement de la page : 

<div widgetType="grid"> 

<column title="Nom" style="width:40%"/> 

<column title="Prenom" style="width:60£"/> 
</div> 
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Dans les balises HTML ci-dessus, l'attribut widgetType permet de definir la balise div 
comme etant un element a modifier au chargement. Les balises col umn permettent de definir 
les colonnes du tableau. 

Le code suivant, lance apres chargement de la page, permet d'interpreter l'ensemble des 
balises avec un attribut widgetType : 

function buildWidgett ){ 

var nodes = document .getElementsByTagNameC'*") ; 
for (var i=0; i < nodes. length; i++){ 
var node = nodes[i]; 
if (node.nodeType « 3){ 

var widgetType = node.getAttributeC'widgetType" ) ; 
if ("grid" == widgetTypeH 

constructGrid(node) ; 
} else if ("onglet" == widgetType)! 
(...) 



(...) 



} 



La fonction bui 1 dWidget parcourt toutes les balises de l'arbre DOM et declenche un trai- 
tement specifique lorsqu'une balise contient un attribut widgetType, en l'occurrence la 
fonction constructGrid, chargee de la construction du tableau : 

function const ructGrid(baseNode){ 
// construction d'un fragment 
var grid = document. createDocumentFragmentt ) ; 
var oTable = document. createElement( "table") ; 
var oTbdy = document. createElementC'tbody") ; 
oTable.appendChild(oTbdy) ; 
var oEntete = document. createElementC'tr" ) ; 
oTbdy.appendChild(oEntete) ; 
// interpretation des balises column 
var columns = baseNode.getElementsByTagNameC'col umn" ) ; 
for (var i = ; i < col umns .length; i++){ 

var column - columns[i]; 

var titre = column. getAttribute( "title") ; 

var oTd = document. createElementC'td") ; 

oTd. style. cssText = column. style. cssText; 

var txt = document. createTextNode(titre) ; 

oTd.appendChild(txt) ; 

oEntete.appendChild(oTd) ; 

(...) 
} 
baseNode.appendChild(grid) ; 
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La fonction constmctGrid interprete les balises col umn afin de creer les differentes colon- 
nes du tableau. Le code de cet exemple n'est evidemment pas complet, mais il permet de 
se rendre compte du potentiel de la modification du DOM au chargement. 



Conclusion 



Le DOM normalise une API permettant de fournir une representation objet de la struc- 
ture d'un document hierarchique, la plupart du temps fonde sur un langage de balises. II 
offre egalement un support afin de le manipuler et de le parcourir. 

Dans ce chapitre, nous avons decrit les differents objets de l'arbre logique DOM. Nous 
les avons mis en oeuvre afin d'interagir avec l'arbre DOM d'une page HTML. L'API 
DOM offre la possibilite de parcourir cet arbre et de le modifier dynamiquement, meme 
apres le chargement des pages HTML. 

Le DOM s'avere bien adapte pour mettre en oeuvre des composants graphiques en travaillant 
directement sur l'arbre DOM. 

Tous les navigateurs Web n'implementent cependant pas encore l'ensemble des specifi- 
cations du DOM. Une couche d' abstraction (bibliofheque, framework, boite a outils, etc.) 
est done souvent necessaire pour resoudre les problemes d' implementation. 
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Mise en oeuvre d'Ajax 



Veritable cle de voute des applications Web riches, Ajax (Asynchronous JavaScript And 
XML) permet d'executer des requetes HTTP sans pour autant avoir a recharger la page 
qui T execute. 

Ajax se fonde essentiellement sur la classe XMLHttpRequest, en cours de normalisation 
aupres du W3C. Cette derniere fournit un cadre arm d'implementer des requetes Ajax de 
maniere aussi bien synchrone qu'asynchrone. Nous detaillons dans ce chapitre la facon 
d'utiliser cette classe. 

Nous verrons egalement que la classe XMLHttpRequest impose des limitations, notamment 
quant a l'appel de services d'un domaine autre que celui de la page qui desire les utiliser. 
Differents contournements peuvent etre mis en oeuvre arm d'adresser ces problematiques 
d'acces a des services externes. 



Ajax et la classe XMLHttpRequest 

Dans le chapitre introductif de cet ouvrage, nous avons aborde d'une maniere generate les 
principaux mecanismes d'Ajax. Nous avons vu notamment que ce dernier offrait la possi- 
bility d'executer des requetes HTTP a partir de pages HTML sans avoir a les recharger. 

La figure 5.1 (page suivante) illustre ce dernier mecanisme. 

Nous allons a present detailler la mise en oeuvre d'Ajax en se fondant sur la classe 

XMLHttpRequest. 
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Figure 5.1 

Fonctionnement general d'Ajax 



La classe XMLHttpRequest 

L'entite de base permettant de mettre en oeuvre Ajax dans un navigateur Web est la classe 
JavaScript XMLHttpRequest. 

Cette classe n'est pas recente, puisqu'elle a ete developpee initialement par Microsoft 
sous forme de controle ActiveX et integree a Internet Explorer 5.0 des 1998. Par la suite, 
elle a ete implementee progressivement en tant qu'objet JavaScript natif dans les principaux 
navigateurs, comme le montre le tableau 5.1. 

Tableau 5.1 Prise en compte de la classe XMLHttpRequest 
par les principaux navigateurs Web 



Date de prise 


en 


compte 


Navigateur et version 


1998 






Internet Explorer 5.0 


Mai 2002 






Mozilla 1.0 


Fevrier 2004 






Safari 1 .2 


Mars 2005 






Konqueror 3.4 


Avril 2005 






Opera 8.0 



Depuis 2006, la classe XMLHttpRequest fait l'objet d'un travail de specification du consortium 
W3C, dont l'etat d'avancement est disponible a l'adresse http://www.w3.org/TR/XMLHttpRequest/. 

Comme cette classe est supportee de facon differente dans les navigateurs, et notamment 
dans Internet Explorer, une fonction doit etre mise en oeuvre afin de gerer sa creation et 
sa configuration suivant le navigateur utilise. 
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Le code suivant donne un exemple d' implementation generique de cette fonction : 

function getXMLHttpRequest( ) { 
if (window. XMLHttpRequest) { 

var xmlHttpReq - new XMLHttpRequest( ) ; 
// evite un bogue du navigateur Safari 
if (xmlHttpReq.overrideMimeType) { 

xmlHttpReq.overrideMimeType("text/xml ") ; 
} 

return xmlHttpReq; 
) else if (window. ActiveXObject) { 
try { 

return new ActiveXObject( "Msxml2.XMLHTTP") ; 
} catch (err) {) 
try { 

return new ActiveXObject( "Microsoft. XMLHTTP") ; 
} catch (err) {} 
} 
throw new Errort "Impossible de creer 1'objet" 

+"XMLHttpRequest pour le navigateur."); 
} 

Les bibliotheques JavaScript, notamment prototype et dojo, integrent ce mecanisme dans 
leur support de la technologie Ajax. 

Les tableaux 5.2 et 5.3 recapitulent respectivement les attributs et methodes de cette classe. 



Tableau 5.2 Attributs de la classe XMLHttpRequest 



Attribut 


Description 


onreadystatechange 


Permet de positionner une fonction de rappel, qui est appelee lorsque I'evenement readystatechange 
se produit. Cet evenement est supporte en mode asynchrone et correspond a un changement d'etat 
dans le traitement de la requete. 


readyState 


Code correspondant a I'etat dans lequel se trouve I'objet tout au long du traitement d'une requete et 
de sa reponse. 


responseText 


Reponse regue sous forme de texte 


responseXML 


Reponse regue sous forme XML 


status 


Correspond au code du statut de retour HTTP de la reponse. II n'est disponible en lecture que lorsque 
la reponse a la requete a ete regue. 


statusText 


Correspond au texte du statut de retour HTTP de la reponse. II n'est disponible en lecture que lorsque 
la reponse a la requete a ete regue. 





Tableau 5.3 


Methodes de la classe XMLHttpRequest 


Methode 


Parametre 


Description 


abort 


- 


Annule la requete courante et reinitialise I'objet. 


getAl 1 ResponseHeaders 




Retourne tous les en-tetes HTTP contenus dans la reponse 
dans une chaine de caraoteres. Cette methode ne peut etre 
utilisee que lorsque la valeur de la propriete readyState de 
I'objet equivaut a 3 ou 4 (etat Receiving ou Loaded). 
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Tableau 5.3 Methodes de la classe XMLHttpRequest (suite) 



Methode 

getResponseHeader 

open 



send 



setRequestHeader 



Parametre 

Le nom de I'en-tete 



La methode HTTP a utiliser et 
I'adresse de la ressource a acceder. 
De maniere optionnelle, le type de 
fonctionnement ainsi que I'identifiant 
de I'utilisateur et son mot de passe. 



Une chaine de caracteres 
ou un document XML 



Le nom de I'en-tete et sa valeur 



Description 

Retourne la valeur de I'en-tete dont le nom est specifie en 
parametre. Peut-etre utilisee dans le meme cas que la methode 
precedente. 

Initialise I'objet XMLHttpRequest pour une requete parti- 
culiere. Elle permet de specifier le type de requete HTTP a 
utiliser (GET ou POST) et I'adresse de la ressource a acce- 
der. Le type de fonctionnement determine la maniere dont 
est traitee la reponse a la requete (de maniere synchrone ou 
asynchrone). S'il n'est pas specifie, le mode asynchrone est 
utilise. Enfin, des informations de securite (identifiant d'utili- 
sateur ainsi que mot de passe) peuvent etre specifiers. 

Permet d'envoyer une requete a I'adresse specifiee avec la 
methode HTTP souhaitee et eventuellement des parametres 
d'authentification. Si le mode de reception est synchrone, la 
methode est bloquante jusqu'a ce moment. Cette methode 
ne peut etre utilisee que lorsque la valeur de la propriete 
readyState de I'objet equivaut a 1 (etat Open). 

Positionne un en-tete HTTP pour la requete. Cette methode 
ne peut etre utilisee que lorsque la valeur de la propriete 
readyState de I'objet equivaut a 1 (etat Open). 



Maintenant que nous avons aborde la classe de base de la technologie Ajax, nous allons 
detailler la maniere de gerer les differents echanges de donnees en utilisant son support. 



Gestion des echanges 

Contrairement a ce que pourrait laisser penser son nom, Ajax ne gere pas necessairement 
les reponses a des requetes de maniere asynchrone, puisque aussi bien les modes synchrone 
et asynchrone sont supportes. 

La selection du mode de gestion des requetes, synchrone ou asynchrone, se realise au 
moment de l'appel de la methode open, par l'intermediaire de son troisieme parametre. 

Dans le cas d'une mise en oeuvre synchrone, la reception de la reponse se realise sequen- 
tiellement, comme dans le code suivant : 

var transport = getXMLHttpRequest( ) ; 

transport. openC'get" , "/ajax/data. js" , false); 

transport. send(nul 1 ) ; 

var texte = transport. responseText; 

(...) 

En cas de mise en oeuvre asynchrone, la reception se realise par l'intermediaire d'une 
fonction de rappel. Cette derniere est specifiee en utilisant l'attribut onreadystatechange 
de la classe XMLHttpRequest. 
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En mode asynchrone, l'instance de la classe XMLHttpRequest utilisee supports les differents 
etats recapitules au tableau 5.4. 

Tableau 5.4 Etats de l'instance de la classe XMLHttpRequest en mode asynchrone 



Valeur 


Etat 







Uninitialized 


Etat initial 


1 


Open 


La methode open a ete executee avec succes. 


2 


Sent 


La requete a ete correctement envoyee, mais aucune donnee n'a encore ete regue. 


3 


Receiving 


Des donnees sont en cours de reception. 


4 


Loaded 


Le traitement de la requete est fini. 
I 



Chaque fois que l'instance change d'etat, la fonction de rappel enregistree est appelee. 
Cette derniere peut se fonder sur l'attribut readyState de cette instance afin de determiner 
son etat courant. 

Le code suivant decrit la mise en ceuvre d'une requete asynchrone simple : 

var transport = getXMLHttpRequest( ) ; 
function changementEtat( ) { 

if( transport. readyState == 4 ) { 

var texte = transport . responseText; 

(...) 



transport. onreadystatechange = changementEtat ; 
transport. openCget", "/ajax/data. js" , true); 
transport. send(nul 1 ) ; 

Notons que les donnees de la reponse ne sont accessibles par l'objet transport que lorsque 
l'etat de l'objet vaut 4 (Loaded). 

Bien que le mode synchrone soit supports par la classe XMLHttpRequest, le mode asynchrone 
doit etre prefere puisque les traitements JavaScript ne restent pas bloques en attente de la 
reponse a une requete. 

Notons egalement que certaines bibliotheques, telles que dojo, se fondent sur des fonctions 
de rappel meme dans le mode synchrone. Ces approches permettent d'homogeneiser 
l'utilisation des deux modes, leur selection ne se realisant plus que par des parametres. 



Echanges de donnees 



La classe XMLHttpRequest offre d'interess antes possibilites pour echanger divers types de 
donnees. 

Nous allons voir dans cette section que le format des donnees echangees n'est pas force- 
ment XML. 
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Donnees echangees 

II existe deux facons de specifier des donnees lors de l'envoi d'une requete. 

La premiere consiste a positionner des parametres directement dans l'adresse de la 
ressource du serveur. Cette technique se fonde sur la methode GET du protocole HTTP. 
Le code suivant decrit la mise en ceuvre de cette approche : 

var transport = getXMLHttpRequest( ) ; 

var parametrel = "valeurl"; 

var parametre2 = "valeur2"; 

var adresse = [ "donnees. js" ]; 

adresse.push( "?parametrel=") ; 

adresse. push (parametrel) ; 

adresse. pus h( "&parametre2=") ; 

adresse.push(parametre2) ; 

transport. openCget", adresse. joint "") , true); 

transport. send(nul 1 ) ; 

La seconde facon consiste a envoyer un bloc de donnees et n'est realisable qu'avec la 
methode POST du protocole HTTP. La methode send de la classe XMLHttpRequest permet 
de specifier ce bloc par 1' intermediate de son parametre. Le code suivant decrit la mise 
en ceuvre de cette approche : 

var transport = getXMLHttpRequest( ) ; 

var parametrel = "valeurl"; 

var parametre2 = "valeur2"; 

var parametres = [ ]; 

parametres. push( "{ parametrel: \""); 

parametres. push(parametrel) ; 

parametres. push("\" , parametre2: \""); 

parametres.push(parametre2) ; 

parametres. push( "\" }"); 

transport. openC'post" , "/ajax/data. js" , true); 

transport. send (parametres. joint "\n") ) ; 

(...) 

Dans ce dernier cas, les donnees peuvent etre fournies en tant que texte ou document XML, 
car la methode send accepte ces deux types de format de donnees. 



Structure de l'adresse d'une requete GET 

Afin d'envoyer des parametres, une requete GET doit etre structure de la maniere suivante : 
http://<HOTE>:<PORT>/ressource?parametre1=valeur1&parametre2=valeur2... 

Les elements <H0TE> et <P0RT> doivent etre remplaces respectivement par les valeurs de I'hote et du 

port utilises. Si le port est omis, le port 80 est specifie par defaut. L'exemple suivant permet d'executer une 

requete fondee sur le moteur de recherche Google : 
http://www.google.fr/search?hl=fr&q=javascript&btnG=Recherche+Google&meta= 
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Par contre, la recuperation des donnees contenues dans la reponse de la requete se realise 
d'une seule facon. Elle se fonde sur les attributs responseText et responseXML de l'instance 
de la classe XMLHttpRequest, pour une reponse respectivement au format texte et XML. 
Ces attributs sont positionnes lorsque la reponse a ete recue (etat Loaded). 

Le code suivant donne un exemple d'utilisation de ces attributs (reperes O et ©) : 

var transport = getXMLHttpRequest( ) ; 

(...) 

//Dans le cas ou la reponse est au format texte 

var reponse = transport. reponseText; <-© 

//Dans le cas ou la reponse est au format XML 

var reponseXML = transport. reponseXML; <-© 

Les donnees recues dans la reponse peuvent done etre manipulees aussi bien sous forme 
de texte que de document XML. 

Parallelement aux donnees applicatives, des donnees peuvent etre specifiees au niveau de 
la couche de transport en tant qu'en-tetes HTTP. Le positionnement de ces donnees se fonde 
sur la methode setRequestHeader et leur recuperation sur les methodes getResponseHeader 
et getAl 1 ResponseHeaders. 

Le code suivant fournit un exemple d'utilisation de ces methodes (reperes O et ©) : 

var transport = getXMLHttpRequest( ) ; 

(...) 

transport. openC'post" , "/ajax/data. js" , true); 

transport. setRequestHeader ("Con tent- type" , 

"appl ication/x-www-form-url encoded" ) ; <-0 
transport. send(nul 1 ) ; 
(...) 
var typeServeur = transport. getResponseHeaderC'Server") ; <-© 

Structure des donnees echangees 

Differents formats de donnees peuvent etre utilises avec la technologie Ajax. Le format 
texte peut meme etre utilise, mais, en ce cas, aucun support n'est disponible en JavaScript 
afin d'acceder aux informations contenues dans les donnees. 

Format XML 

La classe XMLHttpRequest offre nativement un support pour l'utilisation de XML par le 
biais de sa methode send et de son attribut responseXML, qui prennent et renvoient respec- 
tivement des documents XML. Cette approche structure les donnees tout en les rendant 
lisibles par les utilisateurs. 

De plus, ce format etant regulierement utilise dans les applications, il est maitrise par la 
plupart des developpeurs. Son principal inconvenient vient de la lourdeur de l'ecriture 
des traitements de parcours des donnees. 
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Dans le cadre de JavaScript, la technologie DOM doit etre mise en oeuvre afin de manipuler 
les requetes et les reponses. 

Le code suivant utilise le format XML avec la classe XMLHttpRequest aussi bien au niveau 
de l'envoi (repere ©) que de la reception (repere O) : 

var transport = getXMLHttpRequest( ) ; 
function changementEtat( ) { 

if( transport. readyState == 4 ) { 

var donneesXML = transport. responseXML; <-0 

// donnees correspond a la balise de base de la reponse 

var donnees = donneesXML. childNodes[0] ; 

// Traitement des donnees XML recues 

var differentesDonnees = donnees .childNodes ; 

forCvar cpt=0; cpKdifferentesDonnees. length; cpt++) { 
var donnee = differentesDonnees[cpt] ; 
(...) 

} 
} 
} 

transport. onreadystatechange = changementEtat; 
transport. openCget", "donnees. xml " , true); 
// Construction des donnees XML pour l'envoi 
var parametres = document. createElement( "parametres") ; 
var parametrel = document. createElement( "parametre" ) ; 
parametrel.setAttribute( "nom" , "parametrel") ; 
var texteParametrel = document. createTextNodeC'valeurl" ) ; 
parametrel. appendChild(texteParametrel) ; 
parametres. appendChildt parametrel) ; 
transport, send (parametres) ; <-© 

Dans l'exemple ci-dessus, la structure XML envoyee est la suivante : 

|<parametres> 
<parametre nom="parametrel">valeurl</parametre> 
</parametres> 

La structure XML recue peut etre, par exemple, de la forme suivante : 

I<donnees> 
<donnee nom="donneel">valeurl</donnee> 
</donnees> 

Format HTML 

II est possible de recevoir directement des blocs de code HTML, notamment pour rafrai- 
chir une partie d'une page Web. Cette methode peut toutefois s'averer complexe d'utili- 
sation lors de 1' incorporation des blocs dans une page, notamment pour la gestion des 
styles. 
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Le code suivant donne un exemple de mise en oeuvre de ce format pour les echanges dans 
une page HTML : 

<html> 
<head> 

<script type="text/javascript"> 
function getXMLHttpRequest( ) { 

(...) 
} 
function changementEtatt ) { 

if( transport. readyState == 4 ) { 

var html = transport. responseText ; 
var div = document. getElementById( 

"conteneurReponse" ) ; 
div.innerHTML = html;<-0 



function executerRequete( ) {<-© 

var transport = getXMLHttpRequest( ) ; 
transport. onreadystatechange = changementEtat; 
transport. openCget", "donnees.html", true); 
transport .send(nul 1 ) ; 
) 
</script> 
</head> 
<body> 
(...) 

<div id="conteneurReponse"X/div><- © 
</body> 
</html> 

Cet exemple offre la possibility, par 1' intermediate de la fonction executerRequete 
(repere ©), d'ajouter (repere O) le contenu d'une reponse au format HTML dans la 
balise div d'identifiant conteneurReponse (repere ©). 

Les donnees HTML recues sont alors les suivantes : 

<p>Un paragraphe d'exemple</p> 

Format JSON 

Le format JSON decrit au chapitre 3 permet de representer des objets litteraux JavaScript. 
Lutilisation de ce format est particulierement interessante pour les reponses. 

Des supports existent en JavaScript arm d'evaluer ces structures en objet JavaScript. lis 
sont ensuite accedes par reference, comme n'importe quel objet JavaScript. Son principal 
inconvenient provient de sa non-lisibilite par les utilisateurs. 

Lutilisation du format JSON avec la technologie Ajax necessite une evaluation JavaScript ou 
un parcours des donnees texte recues avec un parseur JSON. 
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Dans le code ci-dessous, la premiere approche se realise par 1' intermediate du mot-cle 
eval (repere O) : 

var transport = getXMLHttpRequest( ) ; 
function changementEtat( ) { 

if( transport . readyState == 4 ) { 

var contenuReponse = transport. reponseText; 
evalCvar reponse - "+contenuReponse) ; <-© 
var differentesDonnees = reponse. donnees; 
forCvar cpt=0; cpt<differentesDonnees. length; cpt++) { 
var donnee = differentesDonnees[cpt] ; 
(...) 
} 
} 
} 

transport. onreadystatechange = changementEtat; 
transport. openCget", "/ajax/data. json" , true); 
transport .send(nul 1 ) ; 

Dans l'exemple ci-dessus, la structure JSON recue est la suivante : 

I{ "donnees": [ 
( nom: "donneel", valeur: "valeurl" } 
] ) 



En resume 



Contrairement a ce que son nom pourrait laisser penser, la technologie Ajax offre la 
possibility d'utiliser plusieurs types de formats pour echanger des donnees. La classe 
XMLHttpRequest supporte nativement les formats texte et XML. 

Au niveau de la reponse, les formats HTML, xHTML et JSON peuvent facilement etre 
mis en oeuvre en se fondant sur le format texte. L application a alors la responsabilite de 
realiser la conversion. 



Contournement des restrictions 

La principale restriction relative a l'utilisation de la classe XMLHttpRequest provient du fait 
qu'elle ne permet pas de realiser des requetes sur un autre domaine que celui de la page 
HTML qui l'utilise. 

La figure 5.2 illustre le cas d'un site heberge sur le domaine sourceforge.net qui essaie 
d'executer une requete Ajax fondee sur la classe XMLHttpRequest vers le domaine 
yahoo.com. 

Si l'acces a des services externes en se fondant sur cette classe est impossible, divers 
contournements permettent d'utiliser des services d'un autre domaine. 
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Figure 5.2 

Execution d'une requete Ajax sur un domaine different 

Proxy au niveau du serveur 

Un proxy correspond dans ce cas d' utilisation a un composant logiciel servant de relais a 
une requete Ajax. Cette derniere ne cherche plus a atteindre le service directement mais 
passe par le proxy, dont l'adresse est desormais dans le meme domaine. C'est le proxy 
qui appelle le service et renvoie la reponse a la page HTML. 

Le proxy n'a pas les memes restrictions que la classe XMLHttpRequest, car il est execute au 
niveau d'un serveur. II peut en outre etre implements avec des langages tels que Java ou PHP. 

La figure 5.3 illustre ce mecanisme. 
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Figure 5.3 

Fonctionnement du contournement fonde sur un proxy au niveau du ser\'eur 
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Nous ne detaillons pas ici 1' implementation de ce type de composant logiciel. 

iframe cachee 

Une iframe correspond a une balise pouvant etre incorporee dans une page HTML arm de 
charger une autre page dans son cadre. Aucune restriction n'est imposee quant au 
domaine des pages chargees. 

Ce mecanisme permet de contourner les limitations de la classe XMLHttpRequest et peut 
etre utilise dans la plupart des navigateurs recents, qui supportent les iframes. 

Une iframe consiste en une balise HTML dont le nom est iframe. Comme pour toute 
balise HTML, un style peut lui etre associe. De plus, cet element supporte l'evenement 
onl oad, qui correspond au chargement d'une page dans son cadre. 

Le code suivant donne un exemple d'utilisation d'une iframe cachee dans une page HTML : 

<html> 
(...) 
<body> 
(...) 

<iframe id="iframeCachee"<-0 
name="if rameCachee" 

style="width:Opx; height:Opx; display: '"'<-© 
f rameborder="0"><-© 
</iframe> 
(...) 
</body> 
</html> 

Afin de rendre invisible la balise iframe (repere O), un style CSS est utilise (repere ©), 
contenant les attributs width (largeur), height (longueur) et display (affichage). Lattribut 
f rameborder doit egalement etre specifie avec la valeur (repere ©). 



Style CSS 

La technologie CSS (Cascading Style Sheets) permet de parameter I'apparence des balises par le biais 
de differents attributs. Chaque balise HTML supporte un ensemble de proprietes graphiques sur lesquel- 
les un style CSS peut jouer afin de modifier son apparence. Nous verrons plus en detail le fonctionnement 
de cette technologie au chapitre 8. 



Cette iframe peut etre ajoutee et supprimee dynamiquement grace au support du DOM. II 
est alors possible de masquer completement 1' utilisation de cette technique. 

Envoi d' informations 

Lutilisation d'iframes offre la possibilite d'envoyer des requetes HTTP de type GET et 
POST. 

Lattribut src peut etre utilise afin de specifier l'adresse de la page a charger. Cette technique 
permet d'envoyer une requete de type GET, et l'adresse utilisee peut integrer directement 
des parametres, comme dans le code ci-dessous, fonde sur 1' iframe decrite precedemment : 
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function executerRequeteGettadresse, parametres) ( 
var requete = [] ; 

// Specification de l'adresse de la requete 
requete. push ("http://test.org/monAdresse" ) ; 
// Specification des parametres de la requete 
var premierParametre = true; 
for( parametre in parametres ) { 

if( premierParametre ) { 
requete. push( "?") ; 

} else { 

requete. push("&") ; 

} 

requete. push (parametre) ; 

requete. push( " = ") ; 

requete. push (parametres [parametre] ) ; 

premierParametre = false; 
} 

// Envoi de la requete 

var iframe = document .getElementByldt "iframeCachee") ; 
iframe.src = requete. joint"") ; 
} 

Une requete POST peut egalement etre mise en oeuvre. Dans ce cas, un formulaire HTML 
doit etre utilise. Ce dernier peut etre ajoute dynamiquement et doit etre relie a 1' iframe 
par le biais de son attribut target. Notons que la valeur de cet attribut fait reference a 
l'attribut name de 1' iframe et non a son attribut id. 

La methode d' envoi du formulaire doit etre POST arm de realiser une requete de type POST. 
Ce mecanisme supporte egalement la methode GET. 

Le code suivant fournit un exemple de mise en oeuvre de cette technique: 

function executerRequetePost(adresse, parametres) { 

// Le formulaire « monFormulai re » existe deja dans la page 

var formulaire = document .createElementt "form") ; <-0 

formulaire.setAttributeC'id" , "monFormulai re" ) ; <-© 

formulaire.setAttributet "name" , "monFormulai re") ; <-© 

formulaire.setAttributeC'action" .adresse) ; <-© 

formulaire.setAttributet "met hod" , "POST") ; <-© 

formulaire.setAttributet "target" , identifi ant Iframe) ;<-© 

// Ajout du formulaire a la page 

document. body .appendChildtformulai re) ; <-0 

// Ajout dynamique de champs dans le formulaire 

fort parametre in parametres ) {<-© 

var champ = document. createElementC'input") ; 

champ. setAttributet "type" , "hidden") ; 

champ. setAttributet" name" , parametre) ; 

champ. setAttributeC'val ue" , parametres [parametre] ) ; 

formul aire.appendChild(champ) ; 
} 

// Envoi de la requete 

formul ai re. submitt ) ; <-© 

// Suppression du formulaire 

document. body .removeChildtf ormul a i re) ; <-@ 
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La fonction executerRequetePost ci-dessus cree tout d'abord un formulaire en lui speci- 
fiant divers parametres (reperes ©) tels que ses nom et identifiant, l'adresse de soumis- 
sion des donnees ainsi que la methode HTTP utilisee. Le parametre target (repere ©) ne 
doit pas etre omis puisqu'il permet de realiser la soumission du formulaire en se fondant 
sur l'iframe. 

Le formulaire cree est ensuite ajoute a la page (repere 0) puis lui sont ajoutes des 
champs de type input pour les differents parametres (repere ©). Le formulaire peut alors 
etre soumis (repere ©) puis supprime de la page (repere 0). 

Recuperation d' informations 

Plusieurs techniques peuvent etre mises en oeuvre arm de recuperer les informations 
renvoyees. Certaines d'entre elles peuvent toutefois impacter la structure de la reponse. 

Une premiere technique impose que la reponse contienne du code JavaScript. Ce dernier a 
la responsabilite d'appeler une fonction de la page HTML contenant 1'iframe arm d'utiliser 
le contenu de la reponse. 

L'iframe a acces a la page qui la contient par le biais du mot-cle pa rent. Une bonne pratique 
consiste a appeler une des fonctions JavaScript de cette page en lui passant une reference 
de l'objet document relatif a l'iframe. 

Le code suivant donne un exemple d' implementation d'une fonction de rappel (repere O) 
de ce type : 

<html> 
<head> 
(...) 
<script type=" text/ javascript") 

function fonctionDeRappel (documentlFrame) {<-© 
var tableau = 

document I Frame. get Element By Id ( "donnees" ) ; 
(...) 
} 
</script> 
</head> 
<body> 
(...) 

<iframe id="iframeCachee" 
name="if rameCachee" 

style="width: Opx; height: Opx; display: '"' 
f rameborder="0"> 
</iframe> 
(...) 
</body> 
</html> 

Le code suivant donne un exemple d'utilisation d'une fonction de rappel (repere ©) a 
partir du contenu de la reponse recue par l'iframe : 
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<html> 

<head>(...X/head> 
<body> 

<table id="donnees"> 

(...) 
</table> 
<script type="text/javascript"> 

parent .fonctionDeRappel (document) ; <-© 
</script> 
</body> 
</html> 

Notons que la reponse doit avoir connaissance du nom de la fonction JavaScript a appe- 
ler. Ce nom peut etre specifie en tant que parametre de la requete correspondante. 

La derniere technique consiste a associer une fonction JavaScript a l'evenement de char- 
gement de la page dans l'iframe, comme dans le code ci-dessous : 

<html> 
<head> 
(...) 

<script type="text/javascript"> 
function traiterPage( ) {<-© 
var iframe = 

document. getElementByldC'iframeCachee") ; 
var contenuRequete = 

extra i reDonneesIframe( iframe) ; <-@ 
(...) 
) 
</script> 
</head> 
<body> 
(...) 

<iframe id="if rameCachee" 
name="iframeCachee" 

style="width=Opx;height=Opx;displ ay=' ' " 
onl oad= "tra iter Page ( ) ;"><-0 
</iframe> 
(...) 
</body> 
</html> 

L' association est mise en ceuvre par l'intermediaire de l'attribut onl oad de la balise 1 frame 
(repere O). 

La fonction traiterPage est appelee chaque fois qu'une page est chargee dans l'iframe. 
Comme nous le verrons au chapitre 8, il est recommande d'externaliser des balises HTML 
par 1' association entre des evenements et des fonctions JavaScript. 

La fonction traiterPage se fonde sur la technologie DOM arm d'avoir acces au contenu 
de la reponse. Dans le code ci-dessus, la fonction extraireDonneesIframe (repere©) 
permet d'extraire les donnees contenues dans la balise body de l'iframe. 
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Cette derniere integre les specificites des differents navigateurs, comme le montre le 
code suivant : 

function extraireDonneesReponse(iframe) { 
if( if rame.contentDocument ) { 

return i frame. content Document. body .innerHTML; 
} else if( if rame.contentWindow ) { 

return if rame.contentWi ndow. document .body .innerHTML; 
} else if( if rame.contentWindow ) { 

return if rame. document. body .innerHTML; 
} 
} 

En resume, cette technique constitue un interessant contoumement des limitations de la 
classe XMLHttpRequest pour les navigateurs supportant la balise i frame. Cette technique 
offre egalement la possibility de gerer l'historique des differentes requetes Ajax realisees. 



Utilisation dynamique de la balise script 

Comme nous l'avons vu au chapitre 2, la balise script permet d'integrer un script Java- 
Script dans une page HTML. Le code contenu directement dans la balise ou reference est 
alors execute par la page. 

La technique que nous allons decrire se fonde sur l'ajout dynamique de balises de ce type 
afin de mettre en oeuvre la technologie Ajax. Une ressource distante est alors appelee et 
doit renvoyer un contenu par l'intermediaire de code JavaScript. Aucun autre format de 
contenu ne peut etre recu directement. 

Le code recu a la responsabilite de declencher les traitements. La plupart du temps, un 
nom de fonction de rappel est specifie en tant que parametre de requete afin que le code 
regu l'appelle. 

Le code suivant donne un exemple de mise en ceuvre de cette technique : 

function ajouterBal iseScript(adresse) {<-© 

var script = document. createElement( "script" ); <-© 
script.setAttribute( "type" , "text/javascript") ; <-© 
script. setAttribute( "src" .adresse) ; 
script.setAttribute( "id" ."script Id") ; 

var head = document. getElementsByTagNameC'head" )[0] ; 

head. appendChi 1 d( script) ; <-© 
} 
function supprimerBal iseScript(adresse) {<-© 

var head = document. getElementsByTagNameC'head" )[0] ; 

var script = document. getElementByldC'scriptld" ) ; 

head. removeChild( script) ; 
} 
function executer Requete (adresse, 

parametres, fonctionDeRappel ) (<-© 

var requete = [] ; 
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II Specification de l'adresse de la requete 

requete.push(adresse) ; 

// Specification des parametres de la requete 

var premierParametre = true; 

for( parametre in parametres ) {<-© 

if( premierParametre ) { 
requete. push( "?") ; 

} else { 

requete. push("&") ; 

} 

requete. push(parametre) ; 

requete. push( " = ") ; 

requete. push (parametres [parametre]) ; 

premierParametre = false; 
} 
if( IpremierParametre ) { 

requete. push( "&") ; 
} else { 

requete. push( "?") ; 
1 

// Specification de la fonction de rappel 
requete. pus h( "&cal lback="+fonctionDeRappel ) ; <-© 
// Execution de la requete 
a j outer Bal iseScript (requete. join ( "") ) ; 
// Suppression de la balise utilised 
supprimerBal iseScript( ) ; 
1 

Dans le code ci-dessus, la fonction ajouterBal i seScri pt (repere O) offre la possibilite de 
creer (repere ©), de configurer (repere ©) et d'ajouter (repere 0) dynamiquement une 
balise script a une page HTML. Elle implemente done l'execution de la requete pour 
l'adresse specifiee. 

La fonction supprimerBal iseScript (repere©) supprime la balise creee afin d'executer la 
requete. La fonction executerRequete (repere ©) se fonde sur ces deux fonctions et a la respon- 
sabilite de construire l'adresse de la requete en utilisant differents parametres (requete 0). Un 
des parametres correspond a la fonction de rappel (repere ©) a utiliser par la reponse. 

Le code recu peut etre de la forme suivante : 

fonctionDeRappel ( { donnees: [<-© 

{ nom: "donneel", valeur: "valeurl" } 

{ nom: "donnee2", valeur: "valeur2" } 
] }); 

Une fonction dont le nom est fonctionDeRappel doit etre definie dans la page HTML. 
Cette fonction est appelee par la reponse avec en parametre les donnees de la reponse 
(repere O). 

Notons qu'une erreur se produit lorsque le contenu recu ne peut etre evalue en JavaS- 
cript. De plus, cette technique ne permet pas d'utiliser des requetes de type POST. 
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En resume 



Nous avons vu que certaines limitations freinaient l'utilisation de la classe XMLHttpRe- 
quest afin de mettre en oeuvre la technologie Ajax. II existe neanmoins des contourne- 
ments permettant d'acceder a des services d'un autre domaine en se fondant sur Ajax. 

Bien que ces techniques permettent de resoudre les limitations de la classe XMLHttpRe- 
quest, elles ne supportent pas toutes les autres fonctionnalites de cette classe. 

Le tableau 5.5 recapitule les fonctionnalites supportees par les differentes techniques 
abordees dans cette section. 

Tableau 5.5 Fonctionnalites supportees par les contournements 



Fonctionnalite 


XMLHttpRequest 


XMLHttpRequest avec 


proxy 


iframe 




Script 


Support par les navigateurs 


Seulement les recents 


Seulement les recents 




Seulement certains 


Oui 


Requetes limitees au 
domaine de la page HTML 


Oui 


Non 






Non 




Non 


Support des methodes GET 
et POST 


Oui 


Oui 






Oui 




Non 


Acces au statut HTTP 


Oui 


Oui 






Non 




Non 


Acces aux en-tetes HTTP 
des requetes et reponses 


Oui 


Oui 






Non 




Non 


Format de donnees supports 


Format texte, XML 
JavaScript et JSON 


Format texte, 
et JSON 


XML JavaScript 


Format texte, XML, 
JavaScript et JSON 


JavaScript 


Traitement asynchrone des 
requetes 


Oui 


Oui 






Oui 




Non 



Certaines bibliotheques JavaScript telles que dojo integrent ces differentes techniques 
directement dans leur support de la technologie Ajax. 

Nous detaillons au chapitre 14 l'utilisation du contournement fonde sur la balise script 
afin d'acceder a des services d'Amazon et de Yahoo!. 



Conclusion 



Ajax ouvre des perspectives interessantes puisqu'une page HTML peut desormais recu- 
perer des donnees afin de mettre a jour certaines de ses parties. II est done desormais 
possible de realiser des applications Internet beaucoup plus evoluees, aux interfaces 
graphiques plus interactives. 

Bien que la classe XMLHttpRequest (ou un de ses equivalents) soit en cours de normalisation 
et supportee desormais par la plupart des navigateurs du marche, elle souffre de limitations, 
notamment pour l'appel de services d' autres domaines. 

Des contournements peuvent etre mis en oeuvre afin de resoudre ces problemes, mais ces 
solutions ne sont pas necessairement supportees par tous les navigateurs. Ces contourne- 
ments se fondent sur l'utilisation de balises HTML telles que script et iframe, mais egale- 
ment sur la mise en oeuvre de composants logiciels au niveau des applications du serveur. 



Partie II 



Fondations 

des bibliotheques 

JavaScript 



Cette partie introduit les bases de bibliotheques JavaScript telles que prototype et dojo. 
Ces bases consistent en des fonctionnalites permettant d'utiliser les elements du langage, 
les types elementaires et les collections. Elles offrent en outre des supports arin de 
mettre en ceuvre la programmation orientee objet, la technologie DOM ainsi qu' Ajax. 

Le chapitre 6 presente les fonctionnalites non graphiques de la bibliotheque proto- 
type, une bibliotheque JavaScript legere utilisee notamment dans le framework Ruby 
on Rails. 

Le chapitre 7 decrit le mode de fonctionnement ainsi que les supports de base de la 
bibliotheque dojo, une bibliotheque JavaScript tres complete reposant sur un mecanisme 
elabore de gestion de modules. 

Les supports lies aux problematiques graphiques de ces bibliotheques sont abordes a 
la partie IV, dediee aux bibliotheques JavaScript graphiques. 
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La bibliotheque prototype 



La bibliotheque prototype offre de tres interessants mecanismes afin de faciliter l'utilisation 
de JavaScript. Developpee par Sam Stephenson, elle sert de base a plusieurs frameworks 
JavaScript, notamment Ruby on Rails, ecrit en Ruby, qui permet de mettre en oeuvre 
simplement et en un minimum de lignes de code et de configuration des applications Web. 
Le site de prototype, accessible a l'adresse http://prototype.conio.net/, ne fournit malheureusement 
que tres peu de documentation. 

La bibliotheque prototype adresse differents aspects du langage JavaScript, allant des 
elements de base du langage jusqu'au support des collections et d'Ajax. Nous detaillons 
dans ce chapitre les fonctionnalites de base de prototype. Nous verrons au chapitre 10 celles 
offertes pour les elements graphiques d'une page HTML. 

Signalons que le nom de cette bibliotheque n'a rien a voir avec la propriete prototype 
decrite au chapitre 3, dedie a la programmation objet en JavaScript. 

Pour utiliser cette bibliotheque, il suffit d' importer le fichier JavaScript prototype.js 
(repere O) contenant 1' implementation de la bibliotheque pour une version souhaitee. 

Le code suivant illustre cette mise en ceuvre : 

<html> 
<head> 

<script type=" text/ javascript" src=" prototype -1.4.0. js"X/script><-© 
(...) 
</head> 
(...) 
</html> 
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Support des elements de base de JavaScript 

La bibliotheque prototype facilite l'utilisation des mecanismes de base du langage JavaScript, 
rendant ainsi le code des applications plus structure et robuste. 



Support des classes 

En premier lieu, elle offre un support integre des concepts orientes objet, ce qui permet 
au developpeur de se concentrer sur leur utilisation plutot que sur leur implementation 
(voir le chapitre 3). Elle se fonde pour cela sur l'objet CI ass et sa methode create afin de 
creer une classe. Cette derniere doit implementer la methode initialize, dont l'objectif 
est 1' initialisation de la classe, comme le ferait un constructeur. Elle met egalement a 
disposition les parametres passes tors de l'appel du constructeur. 

Le code suivant illustre la mise en oeuvre de la classe StringBuffer, decrite au chapitre 3, 
avec le support de la bibliotheque prototype : 

var StringBuffer = CI ass.create( ) ; 
StringBuffer. prototype = { 
initialize : functionO { 

this.chaineslnternes = []; 
}, 
append : function(chaine) { 

t hi s. cha ines Internes. pus h(chaine) ; 
}, 
clear : functionO { 

this.chaineslnternes .splice(0, 

this .chaines Internes .length) ; 
}, 
toString : functionO { 

return this.chaineslnternes. joint"") ; 
} 
} 

var sb = new StringBuffer( ) ; 
sb.appendC'premiere chaine"); 
sb.appendt" et "); 
sb.appendC'deuxieme chaine "); 
var resultat = sb.toStringO ; 
//resultat contient « premiere chaine et deuxieme chaine » 

prototype ne simplifie pas reellement la mise en oeuvre de classes en JavaScript, mais 
offre plutot une autre facon de les implementer. Nous pouvons remarquer par ailleurs 
dans le code ci-dessus que la propriete prototype reste encore utilisee. 

prototype facilite egalement la mise en oeuvre de l'heritage, par l'intermediaire de sa 
methode Obj ect . extend. Cette derniere permet de recopier des proprietes et des methodes 
d'une classe vers une autre sans avoir a implementer la mecanique d'heritage presentee 
au chapitre 3. 
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Le code suivant illustre l'utilisation de cette methode, en reprenant les classes StringBuffer 
et ExtendedStringBuffer abordees au chapitre 3 : 

var StringBuffer = Class. create( ) ; 
StringBuffer. prototype = { 
initialize : functionO { 

this.chaineslnternes = []; 
}, 
this. append = function(chaine) { 

t hi s.chaines Internes. push (chaine) ; 
), 
this. clear = functionO { 

t hi s.chaines I nternes.spl ice(0, 

this.chaineslnternes. length) ; 
), 
this.toString = functionO { 

return this.chaineslnternes. joint "") ; 



var ExtendedStringBuffer = Class. createt ) 
ExtendedStringBuffer. prototype = ( 
initialize : functionO { 

StringBuffer. call (this) ; 
), 

uneMethode : functionO { 
(...) 



Object .extend (ExtendedStringBuffer. prototype, StringBuffer. prototype) ; 

prototype normalise egalement Tutilisation de la methode inspect pour les classes. Cette 
methode permet de recuperer une description lisible du contenu d'un objet sous forme de 
chaine de caracteres. Les classes doivent alors implementer cette methode. De plus, la 
methode Object . i nspect encapsule l'appel de cette derniere pour un objet passe en parametre. 
Elle permet d'appeler la methode toStri ng sur l'objet si la methode i nspect n'existe pas, 
tout en gerant les objets non dermis et nuls. 

Le code suivant illustre son utilisation : 

I var sb = new StringBufferO ; 
var description = Object. inspect(sb) ; 
// description contient « [object Object] » 



Essai de fonctions 

Puisque JavaScript est un langage interprete, les erreurs sont detectees lors de l'execution 
des scripts. Lorsqu'une erreur est levee, elle est interceptee soit par 1' application, soit par 
l'interpreteur JavaScript du navigateur. 
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prototype offre une fonction interessante, Try .these, qui permet d'essayer plusieurs fonctions 
successivement jusqu'a ce que l'une d'elles fonctionne correctement. Cette fonction facilite 
notamment la mise en oeuvre de fonctionnalites specifiques a un navigateur. 

Le code suivant illustre son utilisation : 

function maFonctionO { 
return Try.theset 
functionO { 

alertC'appel de la premiere methode"); 

return testlO; //Erreur car la methode n'existe pas 
}, 
functionO { 

alertC'appel de la seconde methode"); 

return test2(); //Erreur car la methode n'existe pas 
}. 
functionO { 

alertC'appel de la troisieme methode"); 

return "par defaut"; //Element effectivement retourne 
} 
); 



Support des fonctions 

La bibliotheque prototype enrichit la classe Function avec les deux methodes bind ou 
bindAsEventListener. Ce mecanisme esttres utile en cas d'affectation d'une methode d'un 
objet a un autre objet. Dans ce cas, le contexte n'est plus le meme au moment de V execution. 
Ainsi, le mot-cle thi s ne fait plus reference au meme objet, ce qui peut engendrer des erreurs. 

Le code suivant illustre ce probleme : 

var monlnstancel = new ObjectO; 
monlnstancel.maVariable = "test"; 
monlnstancel. maMethode = functionO { 

alertC'Valeur de maVariable : "+this.maVariable) ; 
} 

var monInstance2 = new ObjectO; 

monInstance2.uneAutreMethode = monlnstancel. maMethode; 
monInstance2.uneAutreMethode( ) ; //Genere une erreur car il 
*»maVariable sur mon!nstance2 



n'y a pas de champ 



La methode bi nd permet de preserver le contexte d'execution de la methode par rapport a 
l'objet original. 

Le code suivant adapte l'exemple precedent arm de faire disparaitre l'erreur : 



var monlnstancel = new ObjectO; 
monlnstancel.maVariable = "test"; 
monlnstancel. maMethode = functionO { 

alertC'Valeur de maVariable : "+this. maVariable) ; 
} 
var mon!nstance2 = new ObjectO; 
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ImonInstance2.uneAutreMethode 
= monlnstancel.maMethode.bind(monlnstancel) ; 
monInstance2.uneAutreMethode( ) ; //Affiche correctement la valeur de maVariable 

La seconde methode, bindAsEventListener, met en oeuvre le meme mecanisme pour les 
methodes d' observation d'evenements JavaScript d'une maniere independante du navi- 
gateur. En effet, Internet Explorer impose l'utilisation de window. event arm d'avoir acces 
a l'evenement, alors que les autres navigateurs le passent en parametre. 

L'utilisation de cette methode se realise de la maniere suivante : 

var observateur = new ObjectO; 
observateur.traiterEvenement = function(event) { 

alert( "Evenement declenche : "+event); 
} 

var monDiv = document. getElementById( "monDiv" ) ; 
monDiv.oncl ick 

= observateur.traiterEvenement. bindAsEventListener (observateur) ; 

Grace a la methode bindAsEventListener, prototype passe automatiquement window. event en 
parametre a la methode trai terEvenement si le code s'execute au sein d'Internet Explorer. 



Declencheur 



La bibliotheque prototype offre un support arm de declencher des traitements periodi- 
ques par l'intermediaire de la classe Periodical Executer. 

La methode i ni ti al i ze permet de specifier la fonction a declencher periodiquement ainsi 
qu'un intervalle de temps. Le code suivant illustre la configuration de cette classe afin 
d'appeler la fonction declencherTraitements toutes les dix secondes : 

function declencherTraitements( ) { 

(...) 
} 

var pe = new Periodical Executer( ) ; 
pe.initialize( declencherTraitements, 10) ; 

Nous verrons a la section relative a Ajax que prototype permet de rafraichir regulierement 
des elements d'une page HTML, tels que des elements de formulaires. 

Support des classes de base 

La bibliotheque prototype enrichit les classes de base Stri ng et Number en leur ajoutant des 
methodes dans le but de faciliter leur utilisation. 

Chaines de caracteres 

prototype offre un support pour la gestion des chaines de caracteres par l'intermediaire 
d'un enrichissement de la classe String, classe fournie avec le langage JavaScript. 

Le tableau 6.1 recapitule les differentes methodes ajoutees a la classe String. 
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Tableau 6.1 Methodes d'extension de la classe String 

Methode Description 

camel i ze Permet de convertir les blocs de texte separes par des tirets de la maniere suivante dans la chaine 

de caracteres : « une- chaine » est transformed en « uneChaine ». 

escapeHTML Permet d'encoder les caracteres speciaux HTML tels que < et >. Ces derniers deviennent respecti- 

vement < et >. 

eval Scri pts Permet d'evaluer tous les blocs script compris entre des balises <scri pt> et </scri pt> et presents 

dans la chaine de caracteres. 

extractScri pts Permet de retourner un tableau contenant tous les blocs compris entre des balises <scri pt> et 

</script> et presents dans la chaine de caracteres. 

parseQuery Identique a toQueryParams. 

stri pScri pts Permet de supprimer d'une chaine de caracteres tous les blocs compris entre des balises <scri pt> 

et </script>. 

stripTags Permet de supprimer d'une chaine de caracteres tous les tags HTMLou XML. 

toArray Retourne un tableau contenant les differents caracteres de la chaine. 

toQueryParams Permet d'extraire les differents elements d'une chaine de caracteres au format : 

paraml=val eurl&param2=val eur2... dans un tableau associatif. Elle permet ainsi d'extraire des 
donnees des chaines de parametres HTTP. 

unescapeHTML Realise I'operation inverse de la methode escapeHTML. 



Nous allons mettre en oeuvre les principales methodes recapitulees dans ce tableau. 

La methode stri pTags permet de supprimer toutes les balises HTML ou XML d'une chaine 
de caracteres. 

Le code suivant illustre 1' utilisation de cette fonction : 

var chainelnitiale = "<p>Ceci est un paragraphe.</p>" 

+ "<br/Xp>Un autre. </p>"; 
var chaineFinale = chainelnitiale. stripTagsO ; 
//chaineFinale contient « Ceci est un paragraphe.Un autre. » 

La methode escapeHTML offre la possibility d'encoder les signes speciaux d'une chaine de 
caracteres en HTML, tandis que la methode unescapeHTML realise les traitements inverses. 

Le code suivant illustre l'utilisation de cette fonction : 

I var chainelnitiale - "<p>Un paragraphe.</p>" ; 
var chaineFinale = chainelnitiale. escapeHTMLt ) ; 
//chaineFinale contient « &1 t ; p&gt ; Un paragraphs. </p> » 

La methode parseQuery est particulierement utile arm de decoder une chaine de parametres 
d'une requetes HTTP et de la stocker dans un tableau associatif, tel que 1' illustre le code suivant : 

var chainelnitiale - "parametrel=valeurl&parametre2=valeur2" ; 

var parametres = chainelnitiale. parseQuery( ) ; 

/* la variable parametres est equivalente a 

var parametres = { "parametrel" : "valeurl", "parametre2" : "valeur2" }; */ 
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La methode camel 1 ze permet de transformer des chaines de caracteres separees par des tirets, 
comme dans le code suivant : 

Ivar chainelnitiale = "ma-variable et ma-methode"; 
var chaineFinale = chainelnitiale. camel ize( ) ; 
//chaineFinale contient « maVariable et maMethode » 



Nombres 



L'enrichissement de la classe Number est beaucoup moins important que celui de la classe 
String, decrite a la section precedente. 

Le tableau 6.2 recapitule la liste des methodes ajoutees a cette classe. 

Tableau 6.2 Methodes d'extension de la classe Number 

Methode Description 

succ Retourne le nombre suivant. Est particulierement utile dans les iterations. 

ti mes Permet de realiser une iteration autant de fois que la valeur du nombre. 

toCol orPa rt Retourne la representation hexadecimale d'un nombre. Est particulierement utile pour calculer une 
representation RGB d'une couleur dans les pages HTML. 

Nous allons donner un exemple d'utilisation de la methode times. 

Plutot que de mettre en oeuvre une boucle fondee sur le mot-cle for, comme dans le code 
suivant : 

var maximum=10; 

for(var cpt=0; cpt<maximum; cpt++) { 

(...) 
} 

la methode times prend en parametre une fonction de rappel, qui est appelee a chaque 
iteration. Cette fonction de rappel doit prendre en parametre un nombre correspondant au 
compteur courant. 

Le code suivant illustre 1' adaptation du code precedent avec le support de la methode times : 

var maximum=10; 

maximum. times(function(cpt) { 

(...) 
}); 



Gestion des collections 

La bibliotheque prototype fournit un support afin de faciliter l'utilisation des collections 
en JavaScript par 1' intermediate des classes Enumerable et Hash ainsi que des methodes 
d'extension de la classe Array. 
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Classe Enumerable 

prototype introduit tout d'abord la classe Enumerable afin de parcourir des structures de 
donnees. Puisqu'elle ne peut etre utilisee directement, elle doit etre utilisee arin d'enrichir 
une classe existante, telle que la classe Array, par exemple. 

La methode de base est each, qui, elle-meme, s'appuie sur une methode _each. Cette derniere 
peut etre consideree comme abstraite. En effet, elle doit etre definie non dans la classe 
elle-meme, mais dans la classe qu'elle enrichit. 

Le parametre de la methode _each est une closure permettant d'enrober une fonction de 
rappel et un compteur. Ce dernier est gere par la fonction de rappel, qui l'incremente a 
chacun de ses appels. 



Fonction de rappel 

Les fonctions JavaScript peuvent etre affectees dans des variables et ainsi passees en parametres de 
methodes d'un objet. Ces fonctions peuvent alors etre appelees dans le corps de ces methodes afin de 
parametrer leurs traitements : 

function testFonctionRappel (param) { 
for(var cpt=0;cpt<;cpt++) { 

param(cpt) ; 
} 
} 
testFonctionRappel (function(val ue) ( 

al ert( "Valeur: "+value); 
}); 
La fonction de rappel doit connaitre a I'avance le nombre de parametres avec lesquels elle est appelee. 



Le tableau 6.3 recapitule les differentes methodes de la classe Enumerable. 
Tableau 6.3 Methodes de la classe Enumerable 



Methode 


Parametre 


Description 


all 


Fonction de rappel attendant 
en parametres valeur et index 


Permet de tester les elements d'une collection par I'inter mediaire d'une fonc- 
tion. Des que cette fonction renvoie false, null ou rien, le parcours s'arrete. 
Dans ce cas, la methode all renvoie false, et true dans le cas contraire. 


any 


Fonction de rappel attendant 
en parametres valeur et index 


Permet de tester les elements d'une collection par I'inter mediaire d'une 
fonction. Des que cette fonction renvoie true, le parcours s'arrete. Dans 
ce cas, la methode any renvoie true, et false dans le cas contraire. 


collect 


Fonction de rappel attendant 
en parametres valeur et index 


Permet de se fonder sur le parcours d'une collection pour remplir un 
tableau qui est renvoye par la methode. Les elements du tableau sont 
ceux renvoyes par la fonction de rappel et peuvent done etre differents de 
ceux de la collection initiale. 


detect 


Fonction de rappel attendant 
en parametres valeur et index 


Permet d'extraire un element d'une collection en utilisant une fonction afin de 
tester ses valeurs. Des que cette derniere fonction renvoie true, le parcours 
de la collection s'arrete, et la valeur est retournee par la methode collect. 


each 


Fonction de rappel attendant 
en parametres valeur et index 


Realise I'iteration en se fondant sur la methode _each. 
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Tableau 6.3 Methodes de la classe Enumerable (suite) 



Methode 


Parametre 


Description 


find 


Fonction de rappel attendant 
en parametres valeur et index 


Alias de la methode detect 


findAII 


Fonction de rappel attendant 
en parametres valeur et index 


Permet d'ajouter des elements d'une collection en utilisant une fonction 
afin de tester ses valeurs. Chaque fois que cette derniere fonction renvoie 
true, la valeur courante est ajoutee dans la nouvelle collection qui est 
retournee par la methode findAII. 


grep 


Expression reguliere et fonction atten- 
dant en parametres valeur et index 


Permet d'ajouter des elements d'une collection qui correspondent a une 
expression reguliere. Dans le cas d'une concordance, la valeur ajoutee a 
la collection est celle de I'element de la collection ou celle retournee par 
la fonction de rappel. 


include 


Objet a ajouter a la collection 


Permet de detecter si un element est present dans une collection. 


inject 


Fonction de rappel attendant 

en parametres memo, valeur et index 


Permet de calculer la valeur de retour a partir d'une valeur (parametre 
memo) modifiee tout au long de Iteration pour la collection. 


invoke 


Norn de methode correspondant 
a une propriete des objets de la liste 


Permet d'appeler la methode dont le nom est passe en parametre sur 
tous les objets presents dans la collection. Les valeurs retournees lors 
des appels sont placees dans un tableau retourne par la methode. 


map 


Fonction de rappel attendant 
en parametres valeur et index 


Alias de la methode col 1 ect 


max 


Fonction de rappel attendant 
en parametres valeur et index 


Permet de determiner la valeur maximale d'une collection en se fondant 
ou non sur une fonction de rappel. 


member 


Objet a ajouter a la collection 


Alias de la methode include 


min 


Fonction de rappel attendant 
en parametres valeur et index 


Permet de determiner la valeur minimale d'une collection en se fondant 
ou non sur une fonction de rappel. 


partition 


Fonction de rappel attendant 
en parametres valeur et index 


Permet de separer les elements d'une collection dans deux collections en 
se fondant sur le retour de la fonction de rappel passee en parametre. 


pluck 


Norn de propriete 


Permet de retourner une collection contenant les valeurs des proprietes 
dont le nom est specifie en parametre, et ce pour tous les elements de la 
collection initiale. 


reject 


Fonction de rappel attendant 
en parametres valeur et index 


Permet d'ajouter des elements d'une collection en se fondant sur la fonc- 
tion de rappel passee en parametre. Cette derniere methode specifie les 
valeurs de la collection a ne pas ajouter. 


select 


Fonction de rappel attendant 
en parametres valeur et index 


Alias de la methode f i ndAl 1 


sortBy 


Aucun ou une fonction de rappel atten- 
dant en parametres valeur et index 


Permet de trier une collection en se fondant sur la methode sort de la 
classe Array. 


toArray 


Aucun 


Permet de convertir une collection en un tableau. 


zip 


Une ou plusieurs collections 


Permet de combiner plusieurs collections en une seule contenant des 
sous-collections. 



Nous allons illustrer la mise en oeuvre des plus importantes de ces methodes. Puisque la 
classe Enumerabl e ne peut etre utilisee telle quelle mais par 1' intermediate d'une sous-classe, 
nous utiliserons des tableaux en tant que collection. 
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La methode each permet de parcourir une collection. Elle prend en parametre une fonction 
de rappel qui est executee pour chaque element. Cette methode recoit en parametres la 
valeur et l'index dans la collection, comme l'illustre le code suivant : 

var collection = [ "el emeriti " , "element2", "element3" ]; 
col lection. each(function(value, index) { 

alertC'Valeur pour l'index "+index+" : "+value); 
}); 

La methode collect permet de construire un tableau a partir d'une collection et d'une 
fonction de rappel. Pour chaque element, un element est ajoute, dont la valeur est deter- 
minee par la fonction de rappel, comme dans le code suivant, qui incremente toutes les 
valeurs d'une collection : 

var col lection = [1,2,3]; 

var resultat = col lection. col lect(function(val ue, index) { 

return value+1; 
}); 
// resultat contient le tableau [ 2, 3, 4 ] 

La methode grep permet de construire une collection en se fondant sur les valeurs des 
donnees correspondant a une expression reguliere. Les valeurs stockees sont celles de la 
collection initiale, a moins qu'une fonction de rappel ne soit specifiee. Dans ce cas, les 
valeurs stockees sont celles retournees par cette methode. 

Le code suivant illustre la mise en oeuvre de la methode grep : 

"un test" ] ; 



var collection = ["test de la methode grep", "grep" 
var resultat = col lection. grep(" A test") ; 
/* Le resultat contient « test de la methode grep » car 
**commencent par le mot « test » */ 



es autres chaines ne 



La methode invoke permet d'executer les methodes des objets contenus dans une collec- 
tion et de placer leur valeur de retour dans un tableau. Le premier parametre correspond 
au nom de la methode des objets a executer. Les parametres suivants correspondent aux 
parametres a passer aux differentes methodes. 

Le code suivant illustre la mise en oeuvre de la methode invoke : 

var collection = []; 

var objetl = new ObjectO; 

objetl. methode = function(parametre) { 

return "Methode 1: "+parametre; 
}; 

col lection[0] = objetl; 
var objet2 = new ObjectO; 
objet2. methode = function(parametre) { 

return "Methode 2: "+parametre; 
}; 

col lection[l] = objet2; 

var resultat = col lection. invokeC'methode" , "Un parametre"); 
/* Le resultat contient « Methode l:Un parametre » et « Methode 2:Un parametre » */ 
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La methode pi uck permet d'extraire des donnees d'objets d'une collection afin d'en cons- 
truire une autre. Les donnees sont extraites a partir d'une propriete des objets dont le nom 
doit etre passe en parametre de la methode. 

Le code suivant donne un exemple d'utilisation de la methode pi uck : 

var collection = []; 

var objetl = new ObjectO; 

objetl. propriete = "Propriete de 1'objet 1"; 

col lection[0] = objetl; 

var objet2 = new ObjectO; 

objet2. propriete = "Propriete de 1'objet 2"; 

col lection[l] = objet2; 

var resultat = collection. pluckC'propriete") ; 

/* Le resultat contient "Propriete de 1'objet 1" et "Propriete de 1'objet 2" */ 

La methode sortBy permet de trier les elements d'une collection en se fondant sur la 
methode sort de la classe Array. Cette methode prend en parametre une fonction de 
rappel arm de specifier les valeurs a trier et a ajouter dans la nouvelle collection. 

Le code suivant illustre l'utilisation de la methode sortBy : 

var collection = [ "premier mot", "second mot", 

"troisieme mot", "quatrieme mot" ]; 
var resultat = collection. sortBy(function(value, index) { 

return value; 
}); 

/* Le resultat contient les elements suivants dans cette ordre: « premier mot ». 
*»« quatrieme mot », « second mot » et « troisieme mot »*/ 

La methode toArray permet de convertir une collection en un tableau, comme l'illustre le 
code suivant : 

I var col lection = (...); 
var resultat = collection. toArray( ) ; 

La methode zi p permet de combiner des collections. Le tableau resultat a le meme nombre 
d'elements que le tableau d'origine, mais chaque element est un sous-tableau. Ces sous- 
tableaux contiennent tous les elements des tableaux pour un indice donne. 

Le code suivant donne un exemple d'utilisation de la methode zip : 

I var resultat = [1,2,3] .zip([4, 5,6] , [7,8,9] ) ; 
// Le resultat contient [ [1,4,7], [2,5,8], [3,6,9] ] 

La classe Enumerable ne peut etre utilisee telle quelle, mais sert a etendre les differentes 
classes de collections. La bibliotheque prototype etend les classes Array et ObjectRange 
ainsi que 1'objet $H, que nous detaillons dans les sections suivantes. 

Extension de la classe Array 

La classe Array est un objet fourni par le langage JavaScript. La bibliotheque l'enrichit 
par l'intermediaire de la classe Enumerabl e et des methodes recapitulees au tableau 6.4. 
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Tableau 6.4 Methodes d'extension de la classe Array 



Methode 


Parametre 


Description 


_each 


Fonction de rappel prenant 
en parametre un objet repre- 
sentant la valeur d'un element 
du tableau 


Utilisee par les methodes de la classe Enumerable avec lesquelles la classe 
Array a ete enrichie. Elle parcourt le tableau sequentiellement de I'indice a 
celui correspondant a la taille du tableau moins un. 


clear 


■ 


Permet de reinitialiser un tableau en le vidant. 


compact 


- 


Retourne une liste dont tous les elements de type undefined ou null ont ete 
supprimes. 


first 


■ 


Retourne le premier element du tableau. 


flatten 


- 


Retourne un tableau a une dimension dont les elements de type tableau ont ete 
ajoutes au premier tableau cite. 


indexOf 


Objet a rechercher dans le 
tableau 


Permet de determiner la position d'un element du tableau. S'il n'est pas present, 
la methode retourne -1. 


last 


■ 


Retourne le dernier element du tableau. 


reverse 


Booleen specifiant si I'ordre 
des elements du tableau doit 
etre inverse. 


Retourne un tableau dont I'ordre des elements a ete inverse par rapport au 
tableau initial. 


shift 




Permet de retourner le premier element du tableau. Cet element est alors sup- 
prime du tableau, et tous les elements sont decales vers la gauche. Le nombre 
d'elements du tableau est egalement decremente de un. 


without 


Lisle des elements a exclure 
du tableau 


Retourne tous les elements de la liste non presents dans la liste de ses para- 
metres. 



Nous allons illustrer la mise en oeuvre des principales de ces methodes. 

Les methodes f i rst et 1 ast permettent d'acceder directement aux valeurs des premier et 
dernier elements d'un tableau. Le code suivant illustre leur utilisation : 

var collection = [ "elementl" , "element2" ,"element3" ,"element4" ]; 

var premierEl ement = collection. firstO : 

var dernierElement - collection. last( ) ; 

// premierEl ement contient "elementl" et dernierElement "element4" 

La methode reverse permet d'inverser I'ordre des elements d'un tableau, comme dans le 
code suivant : 

I var collection = [ "elementl" , "element2" ,"element3" ,"element4" ]; 
var resultat = col lection. reverse( ) ; 
/* Le resultat contient [ "element4" , "element3" ,"element2" , "elementl" ]*/ 

La methode shift permet de recuperer le premier element d'un tableau tout en le supprimant 
de celui-ci et en decalant tous ses elements vers la gauche, comme dans le code suivant : 

I var collection = [ "elementl" , "element2","element3" ,"element4" ]; 
var resultat = collection. shiftO; 
/* Le resultat contient "elementl" et la collection [ "element2","element3","element4" ] */ 
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Classe Hash 

La classe Hash facilite la manipulation et le parcours des tables de hachage en JavaScript. 
Cette classe ne peut etre utilisee qu'en enrichissant les collections de couples cle/valeur 
au format JSON. Cette fonctionnalite est realisee par la methode $H dont l'utilisation est 
decrite par la suite dans ce chapitre. 

Le tableau 6.5 recapitule les methodes de la classe Hash. 

Tableau 6.5 Methodes de la classe Hash 



Methode 


Parametre 


Description 


_each 


Fonction de rappel prenant en 
parametre un objet representant 
la valeur d'un element du tableau 


Utilisee par les methodes de la classe Enumerable ajoutee a la classe 
Hash. Elle parcourt les cles de la structure et construit un objet englobant 
la cle et la valeur. 


keys 


■ 


Retourne la collection des cles de la table de hachage. 


merge 


Table de hachage 


Permet d'ajouter des couples cle/valeur a une table de hachage. 


toQueryString 




Permet de construire une chaine de parametres HTTP a partir d'une table 
de hachage. Le format de la chaine de caracteres est : 

parametrel=val eurl&parametre2= valeur 2. 


val ues 

. 


- 


Retourne la collection des valeurs de la table de hachage. 



Nous allons illustrer la mise en ceuvre des principales de ces methodes. 

Les methodes keys et val ues permettent de recuperer des collections contenant respecti- 
vement les cles et les valeurs d'une table de hachage, comme l'illustre le code suivant : 

var hash = $H({ "del": "valeurl", "cle2": "valeur2" }); 

var cles = hash.keys( ) ; 

var valeurs = hash. val ues( ) ; 

/* la collection cles contient "clel" et "cle2" alors que la collection valeurs 

**"valeurl" et "valeur2". */ 

La methode merge ajoute les elements d'une table de hachage a une autre, comme dans le 
code suivant : 



var hash - $H(( "clel": "valeurl", "cle2": "valeur2" }); 
hash.merge({ "cle3": "valeur3", "cle4": "valeur4" }); 
/* la table de hachage contient les elements ayant pour cle "clel" 
*et "cle4" */ 



"cle2" 



"cle3" 



La methode toQueryStri ng permet de construire facilement une chaine de parametres HTTP 
a partir d'une table de hachage, comme dans le code suivant : 

I var hash = $H( "clel": "valeurl", "cle2": "valeur2" }); 
var queryString - hash.toQueryString( ) ; 
// queryString contient la valeur clel=valeurl&cle2=valeur2 

Classe ObjectRange 

La classe ObjectRange permet de boucler sur une plage de nombres specifiee en parametres 
(start pour l'indice de debut et end pour celui de fin) de son constructeur. Ce dernier 
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accepte egalement le parametre exclusive afin de specifier si l'indice de fin doit etre 
inclus ou exclu. 

Cette classe herite de la classe Enumerable. Ainsi, routes les methodes de cette derniere 
peuvent etre utilisees. 

La seule methode specifique a la classe ObjectRange est include. Cette derniere permet 
de determiner si une valeur est comprise dans une plage de valeurs, comme l'illustre le 
code suivant : 

var val ue = (...); 

var range = new ObjectRange(0, 10, true); 

var resultat = range. incl ude(value) ; 

/* resultat est egale a true si la valeur est comprise dans 1 'intervale, false sinon. */ 

La methode peut aussi etre utilisee afin de realiser une boucle each, comme dans le code 
suivant : 

var range = new ObjectRange(0, 10, true); 
range. each(functiontvalue) { 

(...) 
}); 



Support du DOM 

La bibliotheque prototype offre une fonction pour rechercher tous les elements d'un 
arbre DOM correspondant a un style CSS donne. 

Cette fonctionnalite est implementee par le biais de la methode getElementsByClassName. 
Cette derniere a ete ajoutee en tant que methode a l'objet document. Elle prend en parame- 
tre un nom de classe CSS et eventuellement un noeud d'un arbre DOM. Ce dernier para- 
metre peut etre omis. Dans ce cas, la methode utilise le noeud body du document HTML 
comme element de base pour la recherche. 

Le code suivant illustre 1' utilisation de cette methode dans une page HTML : 

<html> 
<head> 
(...) 

<script type="text/javascript"> 
function executerO { 
var elements = 

document.getElementsByClassName( "maCl asse") ;<-0 
//elements contient les balises div et p ci-dessous 
(...) 
} 
</script> 
</head> 

<body onl_oad="executer( )"> 

<div id="monDiv" class="maClasse"><-© 
(...) 
<p class="maClasse">( . . . )</p><-© 
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</div> 
</body> 



</htmi: 



Le repere O indique 1' utilisation de la methode afin de recuperer dans un tableau la liste 
des elements correspondant a la classe maClasse. Les repere s © indiquent les balises 
correspondantes. 



Support a" Ajax 

La bibliotheque prototype offre un certain nombre de fonctionnalites afin de mettre en 
oeuvre Ajax. 

Elle permet notamment de communiquer de maniere transparente avec un serveur via un 
canal HTTP, et ce de maniere synchrone ou asynchrone. Pour cela, prototype utilise un 
objet d'envoi pour echanger des donnees. 

Execution de requites Ajax 

L' envoi et la reception de donnees en utilisant le support Ajax de prototype se fondent sur 
la classe Ajax. Request. 

Cette classe supporte les communications aussi bien synchrones qu'asynchrones. Elle 
detecte automatiquement l'objet a utiliser en fonction du navigateur pour le transport des 
requetes et reponses. L'objet permettant cette communication est stocke dans la variable 
transport de l'instance de la classe AjaxRequest. II est de type XmlHttpRequest ou equiva- 
lent, suivant le navigateur. 



Objet de transport 

Lobjet de transport correspond a I'entite JavaScript utilisee pour envoyer des requetes et recevoir leurs 
reponses. Bien que l'objet XMLHttpRequest soit en cours de normalisation par le W3C (http:// 
www.w3.org/TR/XMLHttpRequest/), il n'est pas supporte par tous les navigateurs. Ces derniers offrent 
cependant des objets similaires qui permettent de mettre en oeuvre Ajax (voirle chapitre 5 pour le detail 
des specificites des navigateurs). Par I'intermediaire de la methode getTransport de l'objet Ajax, la 
bibliotheque prototype retourne l'objet correspondant utilise par le navigateur. 



La mise en oeuvre de la classe Ajax. Request se realise de la maniere suivante : 

Ivar url - "http: //I ocal host/testAjax.html " ; 
var options = { (...) } ; 
var ajaxRequest - new Ajax.Request(url , options); 

Le constructeur de la classe permet de specifier l'adresse ainsi que les options d'envoi. II 
permet en outre d'initialiser l'objet de transport pour le navigateur. Une fois cet objet 
initialise, dans le cas d'une requete asynchrone, le constructeur positionne les fonctions 
de rappel specifiers et envoie la requete. 
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Le tableau 6.6 detaille la liste des options de la classe Ajax. Request. 

Tableau 6.6 Options d'initialisation de la classe Ajax. Request 



Option 


Valeur 


Description 


asynchronous 


true (pardefaut) ou false 


Permet de specifier le mode d'execution de la requete (synchrone 
ou asynchrone). 


method 


get ou post (par defaut) 


Permet de specifier la methode avec laquelle est envoyee la 
requete Ajax. 


onException 


Fonction possedant deux parametres, 
le premier de type Ajax. Request et 
le second de type Object 


Permet de specifier la fonction de rappel a utiliser lors de la levee 
d'une exception au cours du traitement d'une requete Ajax. 


onFailure 


Fonction possedant deux parametres, 
le premier de type XMLHttpRequest 
et le second de type Object 


Permet de specifier la fonction de rappel a utiliser en cas d'echec de la 
requete. Sa determination s'appuie sur la propriete status de I'objetde 
transport. Cette option n'est utilisable qu'en mode asynchrone. 


onSuccess 


Fonction possedant deux parametres, 
le premier de type XMLHttpRequest 
et le second de type Object 


Permet de specifier la fonction de rappel a utiliser en cas de succes 
de la requete. Sa determination s'appuie sur la propriete status 
de I'objet de transport. Cette option n'est utilisable qu'en mode 
asynchrone. 


onXXX 


Fonction possedant deux parametres, 
le premier de type XMLHttpRequest 
et le second de type Object 


Permet de specifier des observateurs sur les differents evene- 
ments du cycle de vie de la requete Ajax. Ce mecanisme n'est uti- 
lisable qu'en mode asynchrone. Les valeurs de XXX peuvent etre 
Unini tial ized, Loading, Loaded, Interactive et Complete. 


parameters 


« » par defaut 


En cas d'utilisation de la methode HTTP get, permet de specifier 
les parametres utilises pour la requete. La chaine doit etre au format 
suivant paraml=valeurl&param2=valeur2. 


postBody 


undefined (pardefaut) 


En cas d'utilisation de la methode HTTP post, permet de specifier 
la chaine a utiliser pour le corps de la requete. 


requestHeaders 


undefined (pardefaut) 


Permet de specifier les en-tetes de la requete dans un tableau. 



Dans le cas d'un appel synchrone, l'option asynchronous doit etre positionnee avec la 
valeur f al se. Les fonctions de rappel ne peuvent alors etre utilisees, et la propriete trans- 
port doit etre utilisee directement arin d' avoir acces au contenu de la reponse par l'inter- 
mediaire de sa propriete responseText ou responseXML. 

Le code suivant donne un exemple de mise en oeuvre d'une requete Ajax synchrone : 

var url = "http://localhost/testAjax.html " ; 
var parametres = "id=10&l angue=FR" ; 
var ajaxRequest = new Ajax.Requestt 
url , 

{ "method": 'get', 
"parameters": parametres, 
"onComplete" : afficherReponse, 
"asynchronous": false, 
"onSuccess": traiterSucces, 
"onFailure": traiterEchec 
} 
); 
var reponseText = ajaxRequest. transport. responseText; 
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Dans le cas d'un appel asynchrone, l'option asynchronous peut etre omise puisque sa valeur 
par defaut est true. II convient, par contre, de definir les evenements du cycle de vie de la 
requete que 1' application doit gerer. Ce mecanisme est configure dans les options de la 
requete par l'intermediaire de fonctions de rappel. Les evenements supportes sont recapitules 
au tableau 6.7. 

Tableau 6.7 Evenements du cycle de vie d'une requete Ajax asynchrone 



Evenement 


Code 


Cle de l'option 


Description 


Uninitial ized 





onUninitial ized 


Correspond a I'etat initial de I'objet de transport. 


Loading 


l 


onLoading 


Est declenche une fois que la methode open a ete appelee sur 
I'objet de transport. 


Loaded 


2 


onLoaded 


Est declenche une fois que la requete a ete correctement envoyee. 


Interactive 


3 


onlnteractive 


Est declenche lorsque des donnees sont en cours de reception par 
I'objet de transport. 


Complete 


4 


onComplete 


Est declenche lorsque la requete a fini de s'executer, aussi bien en 
cas de succes que d'echec. 


- 




onSuccess 


Est declenche lorsque I'execution de la requete a abouti et en cas 
de succes de la requete. 


- 




onFai 1 ure 


Est declenche lorsque I'execution de la requete a abouti et en cas 
d'echec de la requete. 


- 


- 


onException 


Est declenche lors de la levee d'une exception au cours de I'exe- 
cution de la requete. 



Le code suivant illustre la facon de mettre en oeuvre Ajax de maniere asynchrone avec la 
bibliotheque prototype : 

function traiterReponse(request, json) ( 
var reponseText = request. responseText; 
(...) 
} 

var url = (...) 
var parametres = (...) 
var ajaxRequest = new Ajax.Request( 
url , 

{ "method" : 'get' , 
"parameters": parametres, 
"onComplete": traiterReponse 
} 
); 

Le parametre request de la fonction traiterReponse correspond a I'objet de transport utilise 
afin d'executer la requete. 

Dans le cas ou un en-tete HTTP specifie que les donnees regues sont au format JSON, ces 
dernieres sont evaluees et passees sous forme d'objet JavaScript a la fonction de rappel, 
par l'intermediaire du parametre json de la fonction traiterReponse ci-dessus. 
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Dans une utilisation d'Ajax asynchrone, la bibliotheque prototype offre la possibility de 
definir des methodes de rappel globales pour toutes les requetes. Elle s'appuie pour cela 
sur l'objet Aj ax. Res ponders et sa methode register, comme dans le code suivant : 

var rappel sGlobaux - {<-© 
onCreate: function(){ 

alertC'onCreate global"); 
}, 
onComplete: functionO { 

alertC'onComplete global"); 
} 
}; 

Aj ax. Responders. register (rappel sGlobaux) ; <- © 
function traiterReponse(request, json) { 

var reponseText = ajaxRequest. transport. responseText; 
(...) 
} 

var url = (...) 
var parametres = (...) 
var ajaxRequest = new Ajax.Requestt 
url , 

{ "method": 'get', 
"parameters": parametres, 
"onComplete": traiterReponse 



) 



); 



Le repere O indique la specification des fonctions de rappel a utiliser. Le repere © indique 
la facon de specifier ces fonctions de maniere globale pour les requetes Ajax. 

Bien que la bibliotheque prototype fournisse un support permettant d'envoyer des reque- 
tes Ajax et de recevoir leur reponse, elle laisse le soin a 1' application JavaScript de construire 
la structure de la requete et d'extraire les donnees de la reponse. 



Mise a jour determents HTML 

La bibliotheque prototype fournit un support permettant de mettre a jour directement le 
contenu de blocs HTML avec la reponse d'une requete Ajax. Ce mecanisme est parti- 
culierement pratique lorsque la reponse retourne un contenu HTML. La classe Ajax. Updater, 
qui suit les memes principes que la classe Ajax. Request, permet de mettre en ceuvre ce 
mecanisme. 

Le code suivant en donne un exemple d' utilisation : 

I var url = (...) 
var parametres = (...) 
var htmlDiv = "monDiv"; 
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var ajaxUpdater - new Ajax.Updater( 
htmlDiv, 
url , 

{ "method": 'get'. 
"parameters": parametres, 
"onComplete" : traiterReponse 
} 
): 

L'exemple ci-dessus ajoute le code HTML recu dans la balise de la page Web dont l'iden- 
tifiant est monDiv. Le code de la page Web contenant cette balise est le suivant : 

<html> 
(...) 
<body> 
(...) 

<di v id="monDiv"X/div> 
(...) 
</body> 
</html> 

prototype etend la classe precedente afin de mettre a jour periodiquement un element 
d'une page HTML. Ce mecanisme peut etre mis en oeuvre par 1' intermediate de la classe 
Ajax. PeriodicalUpdater. 
Le code suivant en donne un exemple d'utilisation : 

var url - (...) 
var parametres = (...) 
var html Di v = "monDiv"; 

var ajaxUpdater = new Ajax.PeriodicalUpdater( 
htmlDiv, 
url , 

{ "method" : 'get' , 
"parameters": parametres, 
"onComplete": traiterReponse, 
"frequency": 2 
} 
): 

L'exemple ci-dessus ajoute le bloc HTML recu dans la balise de la page ayant pour iden- 
tifiant monDi v. Le contenu de cette balise est ensuite rafraichi toutes les deux secondes. 

Le code suivant decrit la nouvelle structure de la page HTML precedente avec un exem- 
ple de bloc HTML recu (repere O) : 

<html> 
(...) 
<body> 
(...) 
<div id="monDiv"> 

<hl>Une reponse a une requete Ajax.</hl><-© 
<p>Contenu de la reponse. </p> 
</div> 
(...) 
</body> 
</html> 
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Le tableau 6.8 recapitule les options additionnelles utilisables par les classes Ajax.Updater 
et Ajax. Periodical Updater. 



Tableau 6.8 Options additionnelles des classes Ajax.Updater et Ajax.PeriodicalUpdater 

Description 



Option 




Valeur 


decay 




Nombre 


evalScr 


'pts 


Booleen 


f requen 


cy 


Nombre 


insertion 


Sous-classe de 
Insertion 



Permet de specifier le facteur de rallongement de la periode de rafraichissement lorsque la 
reponse regue est identique a celle regue precedemment. 

Permet de specifier si les blocs JavaScript de la reponse Ajax doivent etre evalues. 

Permet de specifier la periode de rafraichissement. 

Permet de specifier I'endroit ou inserer le contenu par rapport a un element specifie. Les 
valeurs possibles sont Insertion. Before, Insertion. Top, Insertion. Bottom et 
Insertion. After. 



Raccourcis 



L'ecriture de scripts JavaScript est souvent fastidieuse, certaines expressions et syntaxes 
etant recurrentes et alourdissant le code. La bibliotheque prototype fournit des « raccourcis » 
pour les expressions les plus courantes. 

La recherche d'elements dans l'arbre DOM par identifiant est souvent necessaire pour les 
scripts utilisant des elements de l'arbre DOM de pages HTML. La fonction $ permet de 
recuperer un element dont 1' identifiant correspond au parametre de la fonction. Elle se 
fonde sur la methode getEl ementByld de l'objet document d'une page HTML. La fonction 
$ peut prendre en parametre un ou plusieurs identifiants. Le retour correspondant peut 
etre respective ment un element ou un tableau d'elements. 

Le code suivant illustre l'utilisation de ce raccourci : 

//Recherche de 1 'element dont l'identifiant est "monldentifiant" 

//Equivalent a document. getElementById( "monldentifiant") ; 

var element = $( "monldentifiant" ) ; 

//Recherche des elements dont les identifiants sont //"monldentifiantl" , 

**"monIdentifiant2" , "monIdentifiant3" 
var elements = $( "monldentifiantl" , 

"monIdentifiant2" , "monIdentifiant3") ; 

Dans sa version 1.5, la bibliotheque prototype supporte le meme mecanisme pour la 
methode getEl ementsByCl assName par 1' intermediate de la fonction $$. Elle prend en parametre 
une syntaxe au format CSS, comme l'illustre le code suivant : 

I //Recherche des elements ayant le style monStyle 
var elements = $$( "monStyle" ) ; 

Pour la gestion des formulaires, la fonction $F permet de faire reference directement a un 
champ d'un formulaire ayant pour parametre son identifiant. Le code suivant illustre son 
utilisation : 



var element = $F( "monldentifiant" ) ; 
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La variable el ement fait reference au champ du formulaire decrit dans le code suivant et 
ayant pour identifiant monldentifiant : 

(...) 
<html> 
<body> 
(...) 
<form (...)> 

<input type="text" id="monIdentifiant" 
value="Ma valeur"/> 
</form> 
(...) 
</body> 
</html> 
(...) 

Concernant les tableaux, prototype propose un interessant raccourci avec la fonction $A, 
qui permet d'appliquer automatiquement a des tableaux simples les comportements de la 
classe Enumerable, comme dans le code suivant : 

var tableau = $A($("monDi v") .childNodes) ; 
tableau. each (function (el ement) { 
alert( "element : "+element); 
}); 

Ce raccourci est particulierement interessant en cas de traitements fondes sur l'arbre DOM 
d'une page HTML. En effet, un noeud possede la plupart du temps plusieurs enfants dont 
le parcours est souvent necessaire. 

prototype offre egalement la possibility de creer tres facilement des tables de hachage par 
1' intermediate de la fonction $H, dont le code suivant illustre la mise en oeuvre : 

var hashTable = $H({ 

"clel", "valeurl", 

"cle2", "valeur2" 
}); 

Puisque l'objet renvoye herite des classes Enumerable et Hash, il est possible de lister tous 
les elements qu'il contient, comme dans le code suivant : 

I var hashtable = (...) 
var cles = hashtable. keys( ) ; 
var valeurs = hashtables.values( ) ; 

Pour finir, la bibliotheque prototype fournit le raccourci $R permettant de definir une plage 
de valeurs. II se fonde sur la classe ObjectRange decrite precedemment. 

Le code suivant donne un exemple permettant de determiner si une valeur est incluse 
dans une plage : 

I var val ue = (...); 
var resultat = $R(0, 10, true) .incl ude(val ue) ; 
/* resultat est egale a true si la valeur est comprise dans 1 'intervale, false sinon. */ 
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Conclusion 



La bibliotheque prototype offre d'interessants mecanismes visant a faciliter et alleger 
l'ecriture d' applications JavaScript. Le spectre des mecanismes mis en oeuvre s'etend de 
l'extension de classes fournies par le langage, telles que Object, String ou Number, jusqu'au 
support d'Ajax et a la mise en oeuvre de raccourcis par l'intermediaire des methodes 
prefixees par $. 

Cette bibliotheque tire egalement parti des concepts avances du langage JavaScript, tels 
que les objets litteraux, les fonctions de rappel et les closures, arm de permettre aux deve- 
loppeurs de developper un code JavaScript plus concis et plus lisible. 

Nous verrons au chapitre 10 que prototype offre des fonctionnalites afin de mettre en oeuvre 
la gestion des evenements et de faciliter Tutilisation d'elements dans les pages HTML. 

La bibliotheque prototype est couramment utilisee dans les applications JavaScript et sert 
meme de base a d'autres frameworks, tel Ruby on Rails. 
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Fondations 
de la bibliotheque dojo 



La bibliotheque dojo est une boite a outils Open Source visant a faciliter l'utilisation des 
technologies JavaScript et DHTML. Creee a partir de projets tels que nWidgets, burstlib 
et f(m) sous 1' impulsion d' Alex Russell et Dylan Schiemann, son principal objectif est de 
resoudre les problemes du DHTML, qui freinaient son adoption en masse afin de developper 
des applications Web riches. 

dojo ne regroupe pas uniquement une collection de bibliotheques JavaScript. Elle offre 
un gestionnaire evolue de modules ainsi qu'un cadre pour structurer les applications Web 
riches fondees sur la technologie JavaScript. Pour simplifier, nous la considerons dans le 
contexte de cet ouvrage comme une bibliotheque. 

Les premieres lignes de code de dojo ont ete ecrites en septembre 2004, et les premieres 
contributions ont debute en mars 2005. A ce jour, trois versions majeures en ont ete publiees. 
dojo est supportee par la fondation dojo, creee en 2005, qui regroupe ses principaux 
developpeurs. 

Nous avons divise la presentation de cette bibliotheque en deux chapitres distincts. Le 
present chapitre aborde sa mise en oeuvre, sa structuration en modules, son support des 
elements de base du langage ainsi que son support des techniques Ajax. Nous detaillons 
au chapitre 1 1 toutes les fonctionnalites de dojo relatives a la programmation Web. 
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Mecanismes de base 

La bibliotheque est structuree en modules adressant diverses problematiques. Elle met en 
ceuvre un mecanisme de chargement a la demande de ces modules afin d'alleger le code 
JavaScript de la bibliotheque utilise au niveau du navigate ur. 

La figure 7.1 illustre les principaux groupes de modules de cette bibliotheque. 
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Systemes de gestion des modules 



Figure 7.1 

Architecture modulaire de la bibliotheque dojo 



Ce mecanisme est recursif. Un module peut necessiter le chargement d'autres modules et 
met en ceuvre la correspondance entre les noms de modules et leurs fichiers source ainsi 
que le transfert de ces fichiers et le chargement du code JavaScript qu'ils contiennent. 
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Installation et configuration 

La bibliotheque dojo propose differentes distributions selon F utilisation souhaitee. Lobjectif 
de ces distributions est d'incorporer differents modules directement dans le fichier dojo.js, 
le fichier pivot de la bibliotheque, plutot que de les charger a la demande. 

En effet, un chargement a la demande d'un grand nombre de fichiers peut engendrer un 
nombre trop important d'echanges reseau et penaliser les performances. 

Le tableau 7.1 recapitule les principales distributions disponibles ainsi que leur contenu. 

Tableau 7.1 Distributions de la bibliotheque dojo 

Norn Description 

ajax Inclut dans le fichier dojo.js le noyau de dojo ainsi que tous les modules permettant de mettre en ceuvre les 

techniques Ajax. 

browserio Inclut dans le fichier dojo.js le noyau de dojo ainsi que tous les modules relatifs a Ajax et fondes sur la classe 

XMLHttpRequest. 

core Inclut uniquement dans le fichier dojo.js le noyau de dojo. 

editor Inclut dans le fichier dojo.js le noyau de dojo ainsi que tous les composants graphiques necessaires a I'editeur 

Wysiwyg. 

event Inclut dans le fichier dojo.js le noyau de dojo ainsi que tous les modules relatifs au support des evenements. 

event_and_io Inclut dans le fichier dojo.js le noyau de dojo ainsi que tous les modules relatifs au support des evenements 
et d'Ajax. 

kitchensink Inclut dans le fichier dojo.js tous les modules de la bibliotheque. 

minimal Contient les modules minimaux permettant a la bibliotheque de fonctionner. 

storage Inclut dans le fichier dojo.js le noyau de dojo ainsi que tous les modules relatifs au stockage d'informations au 

niveau du client. 

widget Contient le noyau de dojo ainsi que tous les modules correspondant aux composants g raphiques de la biblio- 

theque. 



Le nom du fichier telechargeable d'une distribution est structure de la maniere suivante : 
dojo-<VERSION>-<NOM_DISTRIBUTION>.zip. Dans chaque distribution, le fichier 
build.txt localise a sa racine recapitule les differents modules contenus dans le fichier dojo.js. 
Ces differentes distributions sont telechargeables a l'adresse http://download.dojotoolkit.org/. 

Notons qu'il est possible de travailler avec une version non packagee recuperee directe- 
ment a partir du gestionnaire de version. 

L' installation de la bibliotheque consiste a copier les repertoires et fichiers de la distri- 
bution de dojo dans un repertoire accessible depuis le serveur Web du site. Ce reper- 
toire doit pouvoir etre accede depuis un navigateur et comporter, au minimum, les 
elements suivants : 

Isrc/ 
dojo.js 
iframe_history.html 



a Fondations des bibliotheques JavaScript 



Partie II 



La configuration de la bibliotheque se realise en deux etapes dans chaque page HTML. 
La premiere consiste a initialiser l'objet global djConfig (repere O), qui contient le para- 
metrage de la bibliotheque : 

<html> 
<head> 
(...) 
<script> 

djConfig = { isDebug: true };<-© 
</script> 
</head> 
(...) 
</html> 

Le tableau 7.2 recapitule les principaux attributs de cet objet afin de parameter la biblio- 
theque dojo. 

Tableau 7.2 Principaux attributs de configuration de l'objet djConfig 

Attribut Description 

allowQueryConfig Autorise I'utilisation des parametres de requete afin de surcharger les attributs de configuration de 

l'objet djConfig.Savaleur pardefautest false. Dans lecas oil savaleurvaut true, lachainede 
parametres suivante dans I'adresse de la page permet de positionner la valeur de I'attribut 1 sDebug 
avec la valeur true : /maPage.html?djConfig.isDebug=true. 

baseRel ativePath Doit etre utilise dans le cas ou les sources de dojo et les pages qui I'utilisent ne sont pas fournies 

par la meme adresse. Sa valeur par defaut est la chaine de caracteres vide. 

debugAtAl 1 Costs Parametre la bibliotheque afin de faciliter son debogage dans differents outils. Sa valeur par defaut 

est false. 

isDebug Permet d'activer les traces applicatives. Sa valeur pardefautest false. 

parseWi dgets Specifie si les balises correspondant aux composants graphiques de dojo doivent etre evaluees. Sa 

valeur par defaut est true. 

preventBackButtonFix Permet d'activer ou non la gestion du bouton Precedent du navigateur. Si sa valeur est false, ce 
mecanisme est desactive. Sa valeur par defaut est true. 

search Ids Si la valeur de I'attribut parseWi dgets vaut false, permet de specifier les identifiants des balises 

des composants graphiques de dojo a evaluer. 

La seconde etape consiste a faire reference au fichier dojo.js de la distribution utilisee 
(repere O dans le code suivant) au debut des fichiers HTML : 

<html> 
<head> 
(...) 
<script> 

djConfig = { isDebug: true }; 
</script> 
<script 1 anguage="JavaScript" type="text/javascript" 

src=". ./. ./dojo. js"X/script><-0 
</head> 
(...) 
</html> 
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Les differentes distributions de dojo fournissent deux versions du fichier dojo.js. La 
premiere contient une version compressee des sources peu lisibles de la bibliotheque. La 
seconde, correspondant au fichier dojo.js.uncompressed.js et localisee au meme endroit 
que le fichier precedent, n'est pas compressee et est done facilement lisible. 

Le chargement du premier fichier est plus rapide et doit done etre utilise en production. II 
peut cependant se reveler difficile a utiliser pour voir les traitements realises par dojo, ce 
qui n'est pas le cas du second. 

A partir de ce moment, la bibliotheque dojo peut etre utilisee dans la page HTML. Elle 
integre la capacite de charger a la demande les modules necessaires qui ne sont pas presents 
dans le fichier dojo.js. 

Gestion des modules 

Comme indique precedemment, la bibliotheque dojo est structuree en modules, lesquels 
rassemblent diverses entites JavaScript, telles que des fonctions ou des objets JavaScript. 

Le package represente une unite de stockage d'un module et correspond done a un fichier ou 
a une entite telechargeable depuis un serveur Web. Par defaut, tous les packages se trou- 
vent dans le repertoire sre/ situe sous le repertoire d' installation de la bibliotheque dojo. 

Dans la mesure ou le poids global du code de la bibliotheque est important, l'approche de 
dojo consiste a ne charger que les modules utilises par 1' application. La bibliotheque met 
pour cela en ceuvre un mecanisme de chargement a la demande fonde sur les methodes 

dojo. require et dojo. provide. 

La premiere indique qu'un module ou un ensemble de modules est utilise dans l'applica- 
tion. Elle correspond au mecanisme d'importation utilise dans le langage Java et fonde 
sur le mot-cle import. Cette methode est couramment utilisee dans les applications utili- 
sant dojo. 

La seconde specifie le nom du module contenu dans un package. Ce concept est similaire 
a celui mis en oeuvre dans le langage Java avec le mot-cle package. Cette methode est 
utilisee uniquement dans les implementations de modules de dojo ou de modules addi- 
tionnels, tels que des composants graphiques. 

Dans son application, le developpeur doit done specifier les modules qu'il desire utiliser 
afin que la bibliotheque les charge automatiquement. Si le module est deja present, aucun 
chargement n'est effectue. 

Le code suivant decrit 1' importation du module dojo.lang.declare (repere O) : 

<html> 
<head> 

<script language="JavaScript" type="text/javascript"> 

djConfig = { isDebug: true } 
</script> 
<script language="JavaScript" type="text/javascript" 

src=" . ./ . ./dojo. js"X/script> 
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<script 1 anguage="JavaScript" type="text/javascript"> 
do jo. requireC'dojo.l ang. declare") ; <-© 
(...) 
</script> 
</head> 
(...) 
</html> 

La figure 7.2 illustre les mecanismes mis en oeuvre dans cet exemple. 
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Figure 7.2 

Mecanisme de chargement du module dojo.lang.declare 



Dans le cas oil tous les sous-modules d'un module doivent etre importes, le caractere * 

peut etre utilise. La bibliotheque se fonde alors sur le fichier special package .js, 

localise dans le repertoire du package, afin de determiner les modules a importer. 

Le code suivant decrit 1' importation du module dojo.lang.* (repere ©), qui contient 
les sous-modules dojo.lang, dojo. 1 ang. common, dojo. 1 ang. assert, dojo.lang. array, 
dojo.l ang. type, dojo.lang.func, dojo.lang. extras, dojo.lang. repr et dojo.lang.decl are : 

<html> 
<head> 

<script 1 anguage="JavaScript" type="text/javascript"> 

djConfig = { isDebug: true } 
</script> 
<script 1 anguage="JavaScript" type="text/javascript" 

src=" . ./. ./dojo. js"X/script> 
<script 1 anguage="JavaScript" type="text/javascript"> 
dojo. requireC'dojo.l ang.*") ; <-0 
(...) 
</script> 
</head> 
(...) 
</html> 
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La figure 7.3 illustre les mecanismes mis en oeuvre dans cet exemple. 
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Figure 7.3 

Mecanisme de chargement du module dojo.lang.* 

Le tableau 7.3 recapitule les principaux modules disponibles dans la bibliotheque dojo. 
Tableau 7.3 Principaux modules de la bibliotheque dojo 

Module Description 

dojo. date Fonctions de manipulation des dates 

dojo.dnd Support du glisser-deposer 

do j o . dom Fonctions facilitant ('utilisation de DOM 

dojo. event Support des evenements DOM de dojo 

dojo . html Fonctions permettant de realiser des traitements fondes sur des elements HTML 

dojo. io Support relatif a la mise en oeuvre de la technologie Ajax 

dojo.lang Fonctions de base facilitant ('utilisation de JavaScript 

dojo . 1 f x Fonctions permettant de realiser des effets dans des pages HTML 

dojo. logging Support permettant de mettre en ceuvre des traces applicatives 

dojo. profile Profileur JavaScript afin de mesurer les performances des traitements 

dojo . ref 1 ect Fonctions permettant I'acces a des informations sur les objets et les fonctions 
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Tableau 7.3 Principaux modules de la bibliotheque dojo (suite) 



Module 


Description 


dojo.regexp 


Fonctions de construction d'expressions regulieres particulieres 


dojo. string 


Fonctions relatives aux chaines de caracteres 


dojo. style 


Fonctions permettant de realiser des traitements fondes sur des styles CSS 


dojo.svg 


Fonctions relatives a I'utilisation de la technologie SVG 


dojo. widget 


Composants graphiques de la bibliotheque 


dojo.xml 


Support pour parcourir des documents XML et mettre en ceuvre la technologie XSLT 



Nous n'abordons dans ce chapitre que les modules de base non graphiques de la bibliotheque. 
Les mecanismes de dojo relatifs au developpement Web sont detailles au chapitre 11. 



Support de base 

Cette famille de modules a pour objectif de faciliter I'utilisation du langage JavaScript. 
Elle correspond a tous les sous-modules de dojo . 1 ang. 

Ces derniers peuvent etre importes en une seule instruction, comme dans le code suivant : 

dojo.requi re( "dojo.lang.*") ; 

A l'instar de la bibliotheque prototype, dojo offre une fonction interessante, 
dojo.lang.tryThese, qui permet d'essayer plusieurs fonctions successivement jusqu'a ce 
que Tune d'elles ne genere pas d'erreur. Cette fonction facilite notamment la mise en 
oeuvre de fonctionnalites specifiques a un navigateur. 

Le code suivant decrit sa mise en oeuvre : 

function maFonctionO { 

return dojo.lang.tryThese( 
functionO { 

alertC'appel de la premiere methode"); 

return testlO; //Erreur car la methode n'existe pas 
}. 
functionO { 

alertC'appel de la seconde methode"); 

return test2(); //Erreur car la methode n'existe pas 
}. 
functionO { 

alertC'appel de la troisieme methode"); 

return "par defaut"; //Element reellement retourne*-© 



La fonction maFonction renvoie la valeur retournee par la derniere fonction (repere O) 
puisqu'elle est la seule a s'executer correctement. Ce type de fonction est particulierement 
adapte a la selection de l'objet a utiliser lors de la mise en oeuvre des techniques Ajax. 
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La fonction dojo . del ayThese offre egalement un interessant mecanisme pour executer des 
fonctions successivement a un intervalle de temps specifie. Cette fonction se fonde sur la 
methode setTimeout de JavaScript. 

Elle offre egalement la possibility de specifier une fonction de rappel executee avant 
chaque appel de fonction ainsi qu'une autre fonction apres toutes les fonctions specifiees. 

Le code suivant decrit sa mise en oeuvre : 

dojo. 1 ang. del ayThese ( [ 
functionO { 

alertC'appel de la premiere methode"); 
), 
functionO { 

alert( "appel de la seconde methode"); 
}, 
functionO ( 

alert("appel de la troisieme methode"); 
) 
], 10); 

Les fonctions specifiees dans cet exemple sont appelees successivement avec dix secon- 
des d' intervalle. 

Notons la presence des fonctions dojo. lang. setTimeout et dojo.lang.clearTimeout, qui 
permettent d'encapsuler l'utilisation de la fonction JavaScript setTimeout. 

Le code suivant decrit la mise en oeuvre de la fonction do jo. lang. setTimeout : 

I do j o.l ang.setTimeout(function( ) { 
alert( "Execution de la fonction de rappel apres 10 secondes"); 
}, 10000); 



Verification de types 

dojo fournit une encapsulation de differentes fonctions de base de JavaScript arm de 
determiner le type de variables JavaScript. Ces implementations se fondent sur les concepts 
decrits a l'adresse http://www.crockford.com/javascript/recommend.html. 

Le tableau 7.4 recapitule ces differentes fonctions de verification de types de dojo. 
Tableau 7.4 Fonctions de verification de types de dojo 



Methode Parametre 

dojo.lang.isAlien Un element 

dojo. 1 ang. isArray Un element 

dojo. 1 ang. isArrayLike Un element 

dojo. 1 ang. isBoolean Un element 



Description 

Determine si I'element en parametre n'est pas une fonction fournie par le langage 
JavaScript. 

Determine si I'element en parametre est un tableau. 

Determine si I'element en parametre est un objet qui ressemble a un tableau, c'est- 
a-dire qui possede une propriety 1 ength correspondant a un nombre entier fini. 

Determine si I'element en parametre est un booleen. 
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Tableau 7.4 Fonctions de verification de types de dojo (suite) 



Methode 




Parametre 


Description 


dojo.lang 


is Function 


Un element 


Determine si I'element en parametre est une fonction. 


dojo.lang 


isNumber 


Un element 


Determine si I'element en parametre est un nombre. 


dojo.lang 


isObject 


Un element 


Determine si I'element en parametre est un objet. 


dojo.lang 


isString 


Un element 


Determine si I'element en parametre est une chaine de caracteres. 


dojo.lang 


isUndefined 


Un element 


Determine si I'element en parametre est non defini. 



Le code suivant decrit la mise en oeuvre de ces differentes methodes afin de determiner le 
type de variables JavaScript : 

var nombre = 10; 

alert(dojo.lang.isNumber(nombre) ) ; // Affiche true 
var tableau = [] ; 

alert(dojo.lang.isArray(tableau) ) ; // Affiche true 
alert(dojo.lang.isFunction(tableau) ) ; // Affiche false 
var boolean = true; 

alert(dojo.lang.isBoolean(boolean) ) ; // Affiche true 
var chaine = "Ceci est un test"; 
alert(dojo.lang.isString(chaine) ) ; // Affiche true 



Fonctions 



A l'instar de la methode bind de la bibliotheque prototype decrite au chapitre precedent, 
dojo offre une fonction dojo.lang. hitch permettant de resoudre la problematique du 
contexte d' execution d'une fonction JavaScript. 

Cette fonction prend en parametres un objet ainsi qu'une fonction qui sera executee en se 
fondant sur l'objet precedent. 

Le code suivant reprend l'exemple du chapitre precedent en l'adaptant a cette fonction : 

var monlnstance = new ObjectO; 
monlnstance.maVariable = "test"; 
function maFonctionO { 

alertC'Valeur de maVariable : "+this.maVariable) ; 
} 

var nouvel leMaFonction = dojo.lang.hitchtmonlnstance, maFonction); 
nouvel leMaFonction( ) ; 
//Affiche correctement la valeur de maVariable 

L'appel direct a la fonction maFonction genere une erreur puisque le mot-cle thi s ne peut 
etre utilise dans ce contexte d'execution. 

La fonction dojo . 1 ang . curry offre la possibilite de creer une fonction en definissant certains 
de ses parametres avec des valeurs particulieres. La fonction creee peut alors etre utilisee 
avec un nombre de parametres moins important. 
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Le code suivant decrit la mise en oeuvre de cette fonction : 

function maFonctiontparametrel, parametre2, parametre3) { 

return parametrel+" , "+parametre2+" , "+parametre3; 
} 
var nouvel leFonction = dojo.lang.curry( 

null, maFonction, "valeurl"); 
var retour ■ nouvel leFonction("valeur2" , "valeur3"); 
// retour contient la valeur « valeurl, valeur2,valeur3 » 

Le premier parametre, dont la valeur est nulle dans cet exemple, permet de specifier le 
contexte d'execution de la fonction. 



Support de la programmation orientee objet 

La bibliotheque dojo met a disposition dans ce module differentes fonctions utilitaires 
permettant de realiser des operations de base sur les objets JavaScript. 

Le tableau 7.5 recapitule ces differentes fonctions. 

Tableau 7.5 Fonctions de gestion des objets JavaScript 



Parametre 

Deux fonctions de 
construction d'un objet 

Une fonction de cons- 
truction d'un objet et 
un tableau associatif 

Un objet etun tableau 
associatif 

do jo . 1 ang . shal 1 owCopy Un objet et un drapeau 



Fonction 

dojo. inherits 

dojo. lang. extend 
dojo.lang.mixin 



Description 

Permet de faire heriter une classe d'une autre en initialisant I'attribut 
prototype de la classe avec un objet correspondant a la classe mere. 

Ajoute les elements d'un tableau associatif a I'attribut prototype de la 
fonction de construction d'un objet. Cette fonction est equivalente a 
do j o . extend. Cette derniere doit desormais etre utilisee. 

Ajoute les elements d'un tableau associatif a un objet. Cette fonction est 
equivalente a dojo.mixin. Cette derniere doit desormais etre utilisee. 

Permet de doner un objet. Le drapeau en parametre determine si le clonage 
est realise de maniere recursive. 



La fonction do jo. extend permet d'ajouter les methodes contenues dans un tableau asso- 
ciatif a I'attribut prototype de la fonction de construction d'un objet. Ce mecanisme offre 
la possibility d'enrichir une classe avec differentes methodes. 

Le code suivant decrit la mise en ceuvre de la classe StringBuffer, decrite au chapitre 3, 
avec le support de cette fonction (repere O) : 



function StringBuffer( ) { 
this.chaineslnternes 



[]; 



dojo.extend(StringBuffer, {<-© 
append : function(chaine) { 

thi s.chaines Internes. push (chaine) ; 
}, 
clear : functionO { 

thi s.chaines I nternes.spl ice(0, 

thi s.chaines Internes. length) ; 
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toString : functionO { 

return t hi s.chaines Internes, joint"") ; 

} 
}); 

var sb = new StringBuffer( ) ; 
sb.appendC'premiere chaine"); 
sb.appendC' et "); 
sb.appendC'deuxieme chaine "); 
var resultat = sb.toStringt ) ; 
//resultat contient « premiere chaine et deuxieme chaine » 

La fonction dojo. inherits permet de faire etendre une classe d'une autre. Elle initialise 
l'attribut prototype de la fonction de construction correspondant a la classe fille avec une 
instance de la classe mere. De par son implementation, cette fonction ne permet pas de 
mettre en oeuvre 1' heritage multiple. 

Le code suivant decrit 1' utilisation de cette fonction (repere O) en reprenant les classes 
StringBuffer et ExtendedStringBuffer abordees au chapitre 3 : 

function StringBuffer( ) { 

this.chaineslnternes = []; 
} 
dojo.extend(StringBuffer, { 

this. append = function(chaine) { 

this.chaineslnternes. push (chaine) ; 
}, 
this. clear = functionO { 

thi s.chaines Internes. splice(0, 

this .chaines Internes .length) ; 
}, 
this. toString = functionO { 

return this.chaineslnternes. joint"") ; 
} 
} 

function ExtendedStringBufferO { 
} 

do jo. extend (ExtendedStringBuffer, { 
uneMethode : functionO ( 

(...) 
} 
} 
do jo. inherits (ExtendedStringBuffer, StringBuffer) ; <-© 

La bibliotheque dojo fournit egalement un support plus pousse de la programmation 
orientee objet par 1' intermediate de la fonction dojo. lang. declare, qui est abordee plus 
en detail par la suite. 



Tableaux 



La bibliotheque dojo fournit differentes fonctions facilitant l'utilisation et la manipulation 
des tableaux JavaScript simples et associatifs. 

Le tableau 7.6 recapitule ces differentes fonctions. 
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Tableau 7.6 Fonctions de manipulation des tableaux 



Fonction 

dojo. lang. every 



dojo. lang. filter 

dojo. lang. find 

dojo. lang. findLast 
dojo. lang. forEach 

dojo. lang. has 

dojo. lang. inArray 
dojo. lang. indexOf 



dojo. lang. some 



dojo. lang. toArray 



dojo. lang. unnest 



Parametre 

Un tableau, une fonction de rappel 
et un objet 



Un tableau, une fonction de rappel 
et un objet 



Un tableau, un element, un drapeau 
d'identite et un drapeau determi- 
nant si le parcours du tableau se fait 
de sa fin vers son debut. 

Un tableau, un element, un dra- 
peau d'identite 

Un tableau et une fonction de rappel 



Un tableau associatif et un nom 
de propriete 

Un tableau et un element 

Un tableau, un element, un drapeau 
d'identite et un drapeau determi- 
nant si le parcours du tableau se fait 
de sa fin vers son debut. 



dojo. lang. isEmpty Un tableau 

dojo. lang. last IndexOf 
dojo. lang. map 



Un tableau, un element 
et un drapeau d'identite 



Un tableau, un objet et une fonc- 
tion de rappel 






Un tableau, une fonction de rappel 
et un objet 



Un objet similaire a un tableau 
et un indice de debut 

Des elements simples ou des 
tableaux 



Description 

Determine si tous les elements d'un tableau correspondent a 
un critere. La verification de ce dernier se realise par le biais 
d'une fonction de rappel passee en parametre. L'execution de 
la fonction de rappel est realisee dans le contexte de I'objet 
correspondant au dernier parametre. 

Permet de filtrer les elements d'un tableau en se fondant sur 
une fonction de rappel. L'execution de la fonction de rappel est 
realisee dans le contexte de I'objet correspondant au dernier 
parametre. 

Retourne I'indice du premier element du tableau correspon- 
dant a I'element passe en parametre. Retourne -1 si aucun 
element ne correspond. 

Retourne I'indice du dernier element du tableau correspon- 
dant a I'element passe en parametre. Retourne -1 si aucun 
element ne correspond. 

Permet de parcourir un tableau en se fondant sur une fonction de 
rappel. Cette derniere regoit en parametre a chaque iteration 
I'element courant, son indice ainsi que le tableau parcouru. 

Determine si le tableau associatif possede la propriete dont le 
nom est passe en parametre. 

Determine si un element est present dans un tableau. 

Equivalent de la fonction dojo. lang. find. 



Determine si le tableau est vide. Cette fonction supporte aussi 
bien les tableaux simples que les tableaux associatifs. 

Equivalent de la fonction do jo. lang. find Last. 



Permet de construire un tableau a partir d'un autre en se fon- 
dant sur une fonction de rappel. Cette derniere a la responsa- 
bilite de renvoyer I'objet a inserer dans le nouveau tableau. 
L'execution de la fonction de rappel est realisee dans le con- 
texte de I'objet correspondant au dernier parametre. 

Determine si au moins un element d'un tableau correspond a 
un critere. La verification de ce dernier se realise par le biais 
d'une fonction de rappel passee en parametre. L'execution de 
la fonction de rappel est realisee dans le contexte de I'objet 
correspondant au dernier parametre. 

Permet de convertir un objet similaire a un tableau en tableau. 



Permet de construire un tableau simple a partir de tableaux 
imbriques les uns dans les autres. 
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Puisque JavaScript considere les objets en tant que tableaux associatifs, les fonctions du 
tableau 7.6 qui s'appliquent a ces tableaux peuvent etre utilisees avec des objets. 

La fonction dojo.lang.isEmpty determine si le tableau en parametre contient des elements, 
comme le montre le code suivant : 

var monTableaul = [ "el emeriti" , "element2" , "element3" ]; 

var monTableau2 = [] ; 

var tableaulVide = dojo.l ang.isEmpty(monTableaul) ; 

// tableaulVide contient false 

var tableau2Vide = dojo.l ang.isEmpty(monTableau2) ; 

// tableau2Vide contient true 

Cette fonction peut etre utilisee avec des tableaux associatifs, comme dans le code 
ci-dessous : 

dojo.requi re( "dojo.l ang.*") ; 

var monTableauAssociatifl = { "del": "valeurl" }; 

var monTableauAssociatif2 - {}; 

var tableauAssociatiflVide = dojo.lang.isEmpty(monTableauAssociatifl) ; 

// tableauAssociatiflVide contient false 

var tableauAssociatif2Vide = dojo.lang.isEmpty(monTableauAssociatif2) ; 

// tableauAssociatif2Vide contient true 

La fonction dojo . 1 ang . forEach permet de parcourir un tableau en se fondant sur une fonction 
de rappel. Cette derniere est appelee a chaque iteration de la boucle avec l'element courant, 
son indice ainsi que le tableau parcouru. 

Le code suivant decrit la mise en oeuvre de cette fonction : 

var monTableau = [ "elementl" , "element2" ,"element3" ]; 

dojo.l ang. forEachdnonTableau, function (element, indice, tableau) { 

alert(indice+" : "+element); 
}); 

Lexemple ci-dessus affiche les differents elements avec leur indice correspondant : 
pour "elementl", 1 pour "element2" et 2 pour "element3". 

Plusieurs fonctions sont egalement mises a disposition afin de tester la presence d'un element 
dans un tableau. C'est le cas des fonctions similaires dojo.l ang. has, decrite dans le code 
suivant, et dojo.l ang. inArray : 

I var monTableau = [ "elementl" , "element2" ,"element3" ]; 
var indiceElement = dojo.lang.has("element2" ) ; 

Les fonctions dojo.l ang. find et do jo. lang.fi ndLast recherchent F indice du premier element 
dans un tableau correspondant a la valeur specifiee en parametre. Ces deux fonctions 
parcourent respectivement le tableau du debut a la fin et inversement. 

Elles prennent en parametres le tableau ainsi que l'element a rechercher. Un troisieme 
parametre permet de specifier si la comparaison des elements doit etre stride (sans 
conversion de type) en se fondant sur l'operateur ===. Si aucun element n'est trouve, la 
valeur de retour est -1. 
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Le code suivant decrit la mise en oeuvre de ces fonctions : 

var monTableau = [ "element" , "el ement2" , "element" ]; 
var indiceElementl = dojo.lang.findC'element" ) ; 
// indiceElementl contient 

var indiceElement2 = dojo. lang.findLastt "element" ) ; 
// indiceElement2 contient 2 

Les fonctions dojo.lang.indexOf et dojo.lang.lastlndexOf correspondent aux fonctions 
decrites ci-dessus. 

Les fonctions dojo . 1 ang . some et dojo . 1 ang . every permettent de determiner si les elements 
d'un tableau correspondent a un critere. Ce dernier est implements au moyen d'une fonction 
de rappel passee en parametre. 

Le mecanisme de ces fonctions consiste a parcourir le tableau et, pour chaque element, a 
appeler la fonction de rappel. Dans lecas de la fonction dojo.lang.some, la valeur true est 
renvoyee si au moins un des retours de la fonction de rappel pour un element du tableau 
correspond a true. Ainsi, au moins un element du tableau correspond au critere. 

Le code suivant decrit la mise en ceuvre de la fonction do j o . 1 ang . some : 

var monTableau = [ "element" , "el ement2" , "element" ]; 

var retourSome = dojo.lang.sometmonTableau, functiontelement , indice, tableau) { 
if( element=="element" ) { 

return true; 
) else { 

return false; 
) 
}); 
// retourSome contient la valeur true 

La valeur de la variable retourSome correspond a true. Si le tableau ne contenait aucun 
element ayant pour valeur "el ement", la valeur de cette variable serait f al se. 

Dans le cas de la fonction do jo.l ang. every, la valeur true est renvoyee si tous les retours 
de la fonction de rappel pour les elements du tableau correspondent a true. Ainsi tous les 
elements du tableau correspondent au critere. 

Le code suivant decrit la mise en ceuvre de la fonction do j o . 1 ang . every : 

var monTableau = [ "element" , "element" , "element" ]; 

var retourEvery - dojo.lang.everydnonTableau, functiontelement, indice, tableau) { 
if( el ement=="el ement" ) { 

return true; 
) else { 

return false; 
) 
}); 
// retourEvery contient la valeur true 

La valeur de la variable retourEvery correspond a true. Si le tableau contenait un element 
dont la valeur etait differente de "el ement", la valeur de cette variable serait fal se. 
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Programmation orientee objet 

Dans le package dojo.lang. declare, dojo fournit differents mecanismes visant a faciliter 
la mise en oeuvre de la programmation orientee objet avec JavaScript. Tous ces mecanismes 
se fondent sur la fonction dojo.lang. declare. 

Nous allons reprendre dans cette section les differentes classes abordees au chapitre 3. 

Mise en oeuvre des classes 

La fonction dojo.lang. declare prend en parametres le nom de la classe, le ou les classes, 
eventuellement une fonction d'initialisation ainsi qu'un tableau associatif contenant les 
differents attributs et methodes de la classe. 

Le code suivant decrit la mise en oeuvre de la classe Stri ngBuf f er en se fondant sur cette 
methode : 

dojo.lang.declareC'lang.StringBuffer" , null, { 
initializer: functionO { 

this.chaineslnternes = []; 
}, 
append: function(chaine) { 

t hi s. chaines Internes. push (chaine) ; 
}, 
clear: functionO { 

this.chaineslnternes . spl ice(0, this.chaineslnternes .length) ; 
}, 
toString: functionO { 

this.chaineslnternes . joinO" ) ; 
} 
}); 

Toutes les methodes presentes dans le tableau associatif sont ajoutees au prototype de la 
classe et sont done partagees par toutes ses instances. 



Initialisation des classes 

dojo supporte la notion de constructeur, qu'elle appelle initialiseur, dont l'objectif est 
d'initialiser les elements specifiques a l'instance. Un tel initialiseur peut etre mis en 
oeuvre par le biais de la fonction d'initialisation ou par celui d'une methode de la classe 
nommee initializer. 

L'objectif de ces methodes est de permettre 1' initialisation d'elements specifiques a une 
instance d'une classe, tels que les attributs. 

Le tableau associatif decrit a la section precedente ne doit pas etre utilise pour initialiser 
les elements specifiques aux instances, tels que les attributs. Par contre, il peut etre utilise 
arm de mettre en oeuvre des attributs statiques, e'est-a-dire partages par toutes les instances, 
comme le montre le code suivant : 
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dojo.lang.declare( "lang.StringBuffer" , null, { 

attributStatique: "valeur" 
}); 

var sbl = new lang.StringBuffer( ) ; 
var sb2 - new lang.StringBufferO ; 
sbl. attributStatique = "autre valeur"; 

/* sbl. attributStatique et sb2. attributStatique contiennent toutes les deux la valeur 
*»« autre valeur » */ 

La premiere approche consiste simplement a specifier les traitements d' initialisation dans 
une methode nominee initial i zer (repere O), comme dans le code suivant : 

dojo. lang.declare( "lang.StringBuffer" , null, { 
initializer: function(chaine) (<-0 

t hi s.chaines Internes. push (chaine) ; 
}, 

chaineslnternes: [], 
append: function(chaine) { 

this, chaineslnternes. push (chaine) ; 
}, 
clear: functionO ( 

t hi s.chaines I nternes.spl ice(0, this. chaineslnternes. length) ; 
), 
toString: functionO { 

this. chaineslnternes. joinC") ; 
) 
}); 

Le seconde approche, fondee sur la fonction d'initialisation (repere O), utilise le second 
parametre de la methode dojo. declare, comme dans le code suivant : 

dojo. lang.declare( "lang.StringBuffer" , null, function(chaine) {<-© 

this. chaineslnternes = []; 

this. chaineslnternes. push (chaine) ; 
}, { 

append: function(chaine) { 

this. chaineslnternes. push (chaine) ; 
}, 
clear: functionO { 

t hi s.chaines I nternes.spl ice(0, this. chaineslnternes. length) ; 
), 
toString: functionO ( 

t hi s.chaines Internes, joint "") ; 



Support de I'heritage 

La methode dojo . decl are permet de mettre en ceuvre I'heritage par l'intermediaire de son 
second parametre. 
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Le code suivant decrit la mise en ceuvre de la classe StringBuffer (repere O) et de sa 
sous-classe ExtendedStringBuffer (repere ©) en se fondant sur cette methode : 

dojo. lang.declareC'lang. StringBuffer" , null, {<-0 
initializer: function(args) { 

this.chaineslnternes = []; 
}, 
append: function(chaine) { 

this.chaineslnternes . push(chaine) ; 



clear: functionO { 

this.chaineslnternes . spliced), 

this.chaineslnternes. length) j 
}, 

toString: functionO { 

return this.chaineslnternes. joint"") ; 

} 
}); 
dojo . 1 ang.decl a re Clang. ExtendedStringBuffer" Jang. StringBuffer, {<-© 

initializer: functionO { 

}, 

append: function(chaine) { 

this.chaineslnternes .push(«tests : "+chaine) ; 

}, 
}); 

La methode dojo. declare offre la possibilite de gerer separement les methodes de la 
classe courante ainsi que celles de la classe mere. II est de la sorte possible d'appeler une 
methode de la classe mere par l'intermediaire de la methode this. inherited (repere O), 
comme le montre le code suivant : 

do j o.l ang.decl areCjava.l ang. ExtendedStringBuffer" , j a va.lang. StringBuffer, { 

initializer: functionO { 

}, 

append: function(chaine) { 

this, inherited ("append" , chaine) ; <-0 

}, 
}); 

Lors de l'appel du constructeur de la classe ExtendedStringBuffer, les methodes initializer 
des deux classes sont appelees successivement. 



Chafnes de caracteres et derives 

dojo offre des supports permettant de gerer les chaines de caracteres ainsi que leurs derives. 

Ces derniers incluent les chaines de caracteres elles-memes, avec le module dojo . stri ng, les 
dates, avec le module do jo. date, etles expressions reguheres, avec le module dojo.regexp. 
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Chaines de caracteres 

Le module de dojo fournissant des fonctions de manipulation des chaines de caracteres 
est dojo. string. Dans ce module, les noms des fonctions sont prefixes par dojo. string. 

Le tableau 7.7 recapitule ces differentes fonctions. 



Tableau 7.7 Fonctions du module dojo.string 



Fonction 

do jo. string. capitalize 

dojo.string.endsWith 

dojo.string.endsWithAny 
dojo. string. escape 



dojo. string. has 

dojo. string. isBlank 

do jo. st ring. norma li ze- 
Newlines 

dojo. string. pad 



dojo. string. padLeft 



dojo.string.padRight 



dojo. string. repeat 



dojo.string.startsWith 



dojo. string. starts- 
WithAny 



Parametre 

Une chaine de caracteres 

Une chaine de caracteres, une 
chaine de comparaison et even- 
tuellement un drapeau 

Une chaine de caracteres et une 
liste de chaines de comparaison 

Un type de contenu 

et une chaine de caracteres 



Une chaine de caracteres 
et un ensemble de chaines 

Une chaine de caracteres 



Une chaine de caracteres et la 
chaine correspondant a un retour 
a la ligne 

Une chaine de caracteres, la lon- 
gueur de la chaine resultante et 
eventuellement un caractere ainsi 
qu'un sens d'ajout 

Une chaine de caracteres, la lon- 
gueur de la chaine resultante et 
eventuellement un caractere 

Une chaine de caracteres, la lon- 
gueur de la chaine resultante et 
eventuellement un caractere 

Une chaine de caracteres, un 
nombre et eventuellement un 
separateur 

Une chaine de caracteres, une 
chaine de comparaison et even- 
tuellement un drapeau 

Une chaine de caracteres et une 
liste de chaines de comparaison 



Description 

Met en majuscule la premiere lettre de chaque mot de la 
chaine de caracteres. 

Determine si la fin d'une chaine de caracteres correspond 
a celle specifiee en parametre. Un drapeau permet de spe- 
cifier si la comparaison doit etre sensible a la casse. 

Determine si la fin d'une chaine de caracteres correspond 
a I'une de celles specifiees en parametre. 

Convertit et encode une chaine de caracteres pour un type 
de contenu specifie en parametre. Les types supportes 
sont html pour le langage HTML, xhtml pour le langage 
xHTML, sql pour le langage SQL, regexp pour les expres- 
sions regulieres, js pour JavaScript et asci i pour I'enco- 
dage ASCII. 

Determine si une des chaines de caracteres passees en 
parametre est contenue dans une chaine. 

Retourne la valeur true si la chaine de caracteres est unique- 
ment composee d'espaces et f al se dans le cas contraire. 

Permet d'homogeneiser tous les retours a la ligne d'une 
chaine de caracteres en se fondant sur la chaine representant 
ces retours. 

Ajoute avant ou apres une chaine de caracteres un nombre 
specifie en parametre du caractere desire. Si le caractere 
n'est pas specifie, le caractere est utilise. Le sens d'ajout 
peut prendre la valeur 1 pour un ajout en debut de chaine 
(par defaut) et -1 pour un ajout en fin de chaine. 

Ajoute avant une chaine de caracteres un nombre specifie 
en parametre du caractere desire. Si le caractere n'est pas 
specifie, le caractere est utilise. 

Ajoute apres une chaine de caracteres un nombre specifie 
en parametre du caractere desire. Si le caractere n'est pas 
specifie, le caractere est utilise. 

Permet de construire une chaine de caracteres en repetant la 
chaine en parametre du nombre de fois specifie. Un separa- 
teur peut etre utilise afin de separer les chaines repetees. 

Determine si le debut d'une chaine de caracteres corres- 
pond a celle specifiee en parametre. Un drapeau permet de 
specifier si la comparaison doit etre sensible a la casse. 

Determine si le debut d'une chaine de caracteres corres- 
pond a I'une de celles specifiees en parametre. 
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Tableau 7.7 Fonctions du module dojo.string (suite) 



Fonction 


Parametre 


Description 


dojo.string. summary 


Une chaine de caracteres et une 
longueur 


Construit une sous-chaine se finissant par « ... » si la 
chaine en parametre depasse la longueur specifiee. Dans 
le cas contraire, la chaine elle-meme est retournee. 


dojo.string. trim 


Une chaine de caracteres 


Supprime les espaces autour de la chaine specifiee en 
parametre. 


dojo. string. trimEnd 


Une chaine de caracteres 


Supprime les espaces a la fin de la chaine specifiee en 
parametre. 


dojo.string.trimStart 


Une chaine de caracteres 


Supprime les espaces au debut de la chaine specifiee en 
parametre. 



Un premier ensemble de fonctions offrent la possibility de verifier qu'une chaine de 
caracteres correspond a une condition. C'est le cas des fonctions dojo. string. startsWith, 
dojo.string.startsWithAny, dojo.string.endsWith et dojo.string.endsWithAny, qui permettent 
respectivement de determiner si une chaine de caracteres commence ou finit par une autre. 

Le code suivant decrit la mise en oeuvre des deux premieres, sachant que les deux restan- 
tes s'utilisent de la meme maniere : 

var chainel = "Ceci est une chaine de test"; 
var chaine2 = "Une autre chaine de test"; 

var testlChainel = dojo. string. startsWith(chainel, "Ceci"); 

// testlChainel contient la valeur true 

var test2Chainel = dojo. string. startsWithAnytchainel, "Test", "Ceci", "Un"); 

// test2Chainel contient la valeur true 

var testlChaine2 = dojo. string. startsWith(chaine2, "Ceci"); 

// testlChaine2 contient la valeur false 

var test2Chaine2 = dojo. string. startsWithAny(chaine2, "Test", "Ceci", "Un"); 

// test2Chaine2 contient la valeur true 



La fonction dojo. string. has determine si une chaine de caracteres d' ensemble est contenue 
dans une autre, comme dans le code suivant : 



var chainel = "Ceci est une chaine de test"; 

var chaine2 = "Une autre chaine de test"; 

var testChainel = dojo. string. has(chainel, "Ceci"); 

// testChainel contient la valeur true 

var testlChaine2 = dojo. string. has(chaine2, "test"); 

// testlChaine2 contient la valeur true 

var test2Chaine2 = dojo. string. has(chaine2, "Test"); 

// test2Chaine2 contient la valeur false 
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Un autre ensemble de fonctions offrent la possibilite de realiser des operations sur des 
chaines de caracteres. C'est le cas notamment de la fonction dojo. string. trim et de ses 
declinaisons arm de supprimer des espaces « autour » d'une chaine de caracteres et de la 
fonction dojo. string. pad et de ses declinaisons arm d'ajouter un nombre de caracteres 
identiques avant ou apres une chaine de caracteres. 

Lecode suivant decrit la mise en oeuvre de la fonction dojo. string. trim afinde supprimer 
les espaces au debut et a la fin d'une chaine de caracteres : 

Ivar chaine = " Ceci est une chaine de caracteres "; 
var nouvelleChaine = dojo. string. trim(chaine) ; 
/* nouvelleChaine contient la chaine de caracteres « Ceci est une chaine de caracteres » */ 

Le code suivant decrit la mise en oeuvre de la fonction dojo. string. pad afin d'ajouter au 
debut et a la fin d'une chaine de caracteres trois espaces : 

var chaine = "Ceci est une chaine de caracteres"; 

var chainePad = dojo. string. padtchaine, chaine. length+3, " ", 1); 

chainePad = dojo. string. padtchainePad, chainePad. length+3, " ", -1); 

/* chainePad contient la chaine de caracteres « Ceci est une chaine de caracteres » */ 

La fonction dojo. string. capital ize permet de mettre en majuscules les premiers caracteres 
des mots d'une chaine de caracteres, comme dans le code suivant : 

var chaine = "Ceci est une chaine de caracteres"; 
var chaineCapital isee = dojo. string. capital ize(chaine) ; 

/* chaineCapital isee contient la chaine de caracteres « Ceci Est Une Chaine De 
^Caracteres » */ 

dojo fournit en outre la classe dojo. string. Builder afin de construire des chaines de 
caracteres. Cette classe correspond a l'equivalent de la classe Stri ngBuf f er fournie par le 
langage Java. 

Le code suivant decrit la mise en oeuvre de cette classe : 



var builder = new dojo. string. Builder( ) ; 

builder. appendC'Ceci est"); 

builder. appendC une chaine de test"); 

var chaine = builder. toStringt ) ; 

/* chaine contient la chaine de caracteres « Ceci est une chaine de test » */ 



Dates 



Le module de dojo fournissant des fonctions de manipulation des dates est dojo. date. 
Dans ce module, les noms des fonctions sont prefixes par dojo. date. 



Le tableau 7.8 recapitule les principales fonctions de ce module. 
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Tableau 7.8 Principales fonctions du module dojo.date 



Fonction 


Parametre 


Description 


do jo. date. add 


Une date, une unite 
et un nombre 


Ajoute une periode a une date. L'unite choisie permet de spe- 
cifier si la periode est exprimee en secondes, minutes, heu- 
res, jours ou mois. 


dojo.date. compare 


Deux dates et eventuelle- 
ment une option de com- 
paraison 


Permet de comparer deux dates. L'option permet de specifier 
si la comparaison porte uniquement sur la date, I'heure ou les 
deux. 


dojo.date. format 


Une date et un format 


Convertit une date en une chaine de caracteres en se fon- 
dant sur un format. 


dojo.date.getDayName 


Une date 


Retourne le nom du jour de la semaine de la date specifiee. 


dojo.date.getDayShortName 


Une date 


Retourne le nom abrege du jour de la semaine de la date 
specifiee. 


dojo.date.getDaysInMonth 


Une date 


Retourne le nombre de jours pour le mois courant de la date 
specifiee. 


dojo.date.getMonthName 


Une date 


Retourne le nom du mois de la date specifiee. 


dojo.date.getMonthShortName 


Une date 


Retourne le nom abrege du mois de la date specifiee. 


dojo.date.getTimezoneName 


Une date 


Retourne le nom du fuseau horaire de la date specifiee. 


dojo.date.getWeekOfYear 


Une date et eventuellement 
le premier jour del'an nee 


Retourne le numero de la semaine dans I'annee pour la date 
specifiee. 


dojo.date.isLeapYear 


Une date 


Determine si I'annee de la date specifiee est bissextile. 


dojo.date.setDayOfYear et 
dojo.date.getDayOfYear 


Une date et un numero 
Une date 


Positionne et retourne le numero du jour dans I'annee pour la 
date specifiee. 


dojo.date.toRelativeString 


Une date 


Determine I'ecart en la date courante et une date specifiee. 

1 



Les principales fonctions du tableau 7.8 se decomposent en deux ensembles. Le premier 
permet de recuperer et de positionner des informations pour des dates. Le second corres- 
pond a des fonctions de manipulation, de test et de formatage de dates. 

La fonction dojo.date.isLeapYear permet de determiner si I'annee d'une date est bissextile, 
comme le montre le code suivant : 

var datel = new DateO; 

datel.setFullYear(2006); 

var datelBissextile = dojo.date.isLeapYear(datel) ; 

/* datelBissextile contient false car I'annee 2006 n'est pas bissextile */ 

var date2 = new DateO; 

date2.setFullYear(2007); 

var date2Bissextile = dojo.date.isLeapYear(date2) ; 

/* date2Bissextile contient false car I'annee 2007 n'est pas bissextile */ 

var date3 = new DateO; 

date3.setFullYear(2008); 

var date3Bissextile = dojo.date.isLeapYear(date3) ; 

/* date3Bissextile contient true car I'annee 2008 est bissextile */ 



Fondations de la bibliotheque dojo 



Chapitre 7 

La fonction do j o . date . format offre la possibility de convertir une date en chaine de carac- 
teres en se fondant sur un format. Ce dernier utilise differents elements afin de preciser 
les positions des elements d'une date dans une chaine. 

Le tableau 7.9 recapitule les principaux de ces elements. 

Tableau 7.9 Elements du format de date de la fonction dojo.date.format 

Element Description 

la, et %k Correspond aux noms abrege et complet du jour pour le parametre de localisation. 

%b et %i Correspond aux noms abrege et complet du mois pour le parametre de localisation. 

U Correspond au jour dans le mois courant. 

%H et % I Correspond a I'heure courante, respectivement sur 24 heures et 12 heures. 

%j Correspond au numero du jour de I'annee courante. 

%m Correspond au numero du mois de I'annee courante. 

%H Correspond a la minute courante. 

I 

%S Correspond a la seconde courante. 

%y Correspond a I'annee sur quatre caracteres. 

Le code suivant decrit la mise en ceuvre de cette fonction de formatage de dates : 

// Definition de la date: 10/09/2006 a 12h30min30s 

var date = new Date( ) ; 

date.setFullYear(2006); 

date.setMonth(08); 

date.setDate(lO); 

date.setHours(12) ; 

date.setMinutesOO) ; 

date.setSecondsOO) ; 

var format = "%d/%m/%y, %ti:%V\:%S" -. 

var chaineDate = dojo. date. formattdate, format) ; 

// chaineDate contient la valeur « 10/09/2006, 12:30:30 » 

La fonction dojo. date. compare permet de comparer deux dates. Elle renvoie la valeur si 
les deux dates sont egales, 1 si la premiere est superieure a la seconde et -1 dans le cas 
contraire. Elle offre en outre la possibility d'utiliser une option de comparaison afin de 
specifier le type de comparaison : comparaison des dates ou des heures uniquement ou 
des deux. 

Le code suivant decrit la mise en ceuvre de cette fonction : 

/* datel correspond a la date courante dont la valeur des heures est */ 

var datel=new Date( ) ; 

datel. setHours(O) ; 

/* date2 correspond a la date courante dont les valeurs de I'annee et des heures 

*»sont respectivement 2005 et 12 */ 

var date2=new Date( ) ; 
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date2.setFullYear(2005); 

date2.setHours(12); 

var comparaisonl = dojo. date. compare(datel, datel); 

/* comparaisonl contient car les dates sont egales */ 

var comparaison2 = dojo. date. compare(datel, date2, 

dojo.date.compareTypes.DATE) ; 
/* comparaison2 contient 1 car la date de datel est superieure 

a celle de date2 */ 
var comparaison3 = dojo. date. compare(date2, datel, 

dojo.date.compareTypes.DATE) ; 
/* comparaison3 contient -1 (test inverse) */ 
var comparaison4 = dojo. date. compare(datel, date2, 

dojo.date.compareTypes.TIME) ; 
/* comparaison4 contient -1 car 1'heure de datel est inferieure a 

celle de date2 */ 
var comparaison5 = dojo. date. compareCdatel, date2, 

dojo.date.compareTypes . DATE | dojo.date.compareTypes.TIME) ; 
/* comparaison5 contient 1 (test inverse) */ 

La fonction dojo. date. add offre la possibility d'ajouter une periode a une date. Elle est 
tres pratique pour determiner la date obtenue apres un nombre de jours, par exemple. 
Cette periode peut etre specifiee en jours, comme dans le code suivant : 

// Definition de la date: 29/09/2006 a 12h30min30s 

var date = new Date( ) ; 

date.setFullYear(2006); 

date.setMonth(08); 

date.setDate(29); 

date.setHours(12) ; 

date.setMinutes(30) ; 

date.setSeconds(30) ; 

var dateObtenue = dojo. date. add(date, dojo. date. dateParts. DAY, 5); 

// dateObtenue correspond a la date: 04/10/2006 a 12h30min30s 

La fonction dojo . date . add se fonde sur la structure dojo . date . dateParts arin de definir l'unite 
de temps de la periode ajoutee. Cette structure inclut l'annee, le mois, le jour, 1'heure, la 
minute, la seconde et la milliseconde. 



Expressions regulieres 

Le module dojo. regexp de dojo fournit des fonctions implementant diverses expressions 
regulieres arin de verifier suivant des criteres precis et de formater une chaine de carac- 
teres passee en parametre. Dans ce module, les noms des fonctions sont prefixes par 

dojo. regexp. 



Le tableau 7.10 recapitule ces differentes fonctions. 
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Tableau 7.10 


Fonction 


Parametre 


currency 


Un objet 

de configuration 


emailAddress 


Un objet 

de configuration 


emailAddressList 


Un objet 

de configuration 


host 


Un objet 

de configuration 


integer 


Un objet 

de configuration 


ipaddress 


Un objet 

de configuration 


number Format 


Un objet 

de configuration 


real Number 


Un objet 

de configuration 


time 


Un objet 

de configuration 


url 


Un objet 

de configuration 


us. state 


Un objet 

de configuration 



Fonctions du module dojo.regexp 

Description 

Retourne une expression reguliere afin de verifier qu'une chaine de caracteres 
correspond a une valeur monetaire. 

Retourne une expression reguliere afin de verifier qu'une chaine de caracteres 
correspond a une adresse e-mail. 

Retourne une expression reguliere afin de verifier qu'une chaine de caracteres 
correspond a une liste d'adresses e-mail. 

Retourne une expression reguliere afin de verifier qu'une chaine de caracteres 
correspond a un nom de domaine ou une adresse IP. 

Retourne une expression reguliere afin de verifier qu'une chaine de caracteres 
correspond a un nombre entier. 

Retourne une expression reguliere afin de verifier qu'une chaine de caracteres 
correspond a une adresse IP. 

Retourne une expression reguliere afin de verifier qu'une chaine de caracteres 
contient bien des nombres a des positions specifiers. 

Retourne une expression reguliere afin de verifier qu'une chaine de caracteres 
correspond a un nombre reel. 

Retourne une expression reguliere afin de verifier qu'une chaine de caracteres 
correspond a un format de representation d'un temps. 

Retourne une expression reguliere afin de verifier qu'une chaine de caracteres 
correspond a une URL valide. 

Retourne une expression reguliere afin de verifier qu'une chaine de caracteres 
correspond a I'abreviation d'un territoire ou d'un Bat d'Amerique du Nord. 



Un premier ensemble de fonctions se fondent sur un objet de configuration specifiant 
differentes options afin de creer les expressions regulieres. C'est le cas des fonctions 

dojo.regexp. email Address et dojo.regexp. email Address List, qui verifient la validite du format 
d'adresses e-mail. 

Le code suivant decrit leur mise en oeuvre : 



// Verification d'adresses email 

var chaineEmaill = "email@eyrolles.com"; 

var chaineEmail 2 = "email_eyrolles.com" 

var reAdresseEmail = new RegExp(dojo. regexp. email Address( )) ; 

var chaineEmail ICorrecte = reAdresseEmail .test(chaineEmail 1) ; 

// chaineEmaillCorrecte contient la valeur true 

var chaineEmail 2Correcte = reAdresseEmail .test(chaineEmail2) ; 

// chaineEmail2Correcte contient la valeur false 

// Verification de listes d'adresses email 

var chaineListeEmail 1 = "email@eyrolles. com, email l@eyrol les.com" ; 

var chaineListeEmail2 = "email_eyrolles. com, email l_eyrollescom" 

var reListeAdresseEmail = new RegExp(dojo. regexp. email AddressList( )) ; 

var chaineEmaillCorrecte = reListeAdresseEmail .test(chaineListeEmaill) ; 

// chaineEmaillCorrecte contient la valeur true 

var chaineEmail 2Correcte = reListeAdresseEmail .test(chaineListeEmail2) ; 

// chaineEmail 2Correcte contient la valeur false 
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Un autre ensemble se fonde sur des formats arm de verifier le bon format d'une chaine de 
caracteres. Les fonctions de ce type offrent la possibilite de verifier le format de chaines 
utilisant des nombres, telles que les heures et les numeros de telephone. 

La premiere verification est mise en oeuvre par la fonction dojo.regexp.time. Un format 
doit etre specifie en parametre, format se fondant sur les elements recapitules au tableau 7.11. 

Tableau 7.1 1 Elements du format de la fonction dojo.regexp.time 

Element Description 

h Correspond a la valeur des heures de a 12. Cette valeur n'est pas precedee de zero dans le cas d'une valeur 

inferieure a 10. 

H Correspond a la valeur des heures de a 24. Cette valeur n'est pas precedee de zero dans le cas d'une valeur 

inferieure a 10. 

hh Correspond a la valeur des heures de a 1 2. Cette valeur doit etre precedee de zero dans le cas d'une valeur 

inferieure a 10. 

HH Correspond a la valeur des heures de a 24. Cette valeur doit etre precedee de zero dans le cas d'une valeur 

inferieure a 10. 

m Correspond a la valeur des minutes. Cette valeur n'est pas precedee de zero dans le cas d'une valeur inferieure a 1 0. 

mm Correspond a la valeur des minutes. Cette valeur doit etre precedee de zero dans le cas d'une valeur inferieure a 1 0. 

s Correspond a la valeur des secondes. Cette valeur n'est pas precedee de zero dans le cas d'une valeur inferieure a 1 0. 

s s Correspond a la valeur des secondes. Cette valeur doit etre precedee de zero dans le cas d'une valeur inferieure a 1 0. 

t Correspond a la valeur « AM » ou « PM » en majuscules ou minuscules. 

La seconde verification se fonde sur la fonction dojo.regexp.numberFormat, dont le format 
passe en parametre utilise le caractere # afin de specifier la place des nombres dans la 
chaine de caracteres a verifier. Le caractere ? peut egalement etre mis en oeuvre afin de 
specifier des nombres optionnels. Ainsi, les formats peuvent etre de la forme suivante : 

var formatl = "(+###) ## ## ## ## ##•; 

// Pour un numero de telephone avec indicatif : (+033) 01 02 03 04 05 

var formats = ■##-###'; 

// Pour une chaine du type : 342-54303 

var format3 = •### ##### ##???"; 

// Pour une chaine du type 435 58394 455 ou 435 58394 45532 

Le code suivant decrit la mise en oeuvre des fonctions dojo.regexp.time (repere O) et 

dojo.regexp.numberFormat (repere ©) : 

var chaineHeureCorrecte = "13:45:22"; 

var chaineHeurelncorrecte - "1:45:22 PM"; 

var reHeure = new RegExp(dojo.regexp.time( {<-© 

format: "HH:mm:ss" 
})); 

var heureCorrecte = reHeure. test(chaineHeureCorrecte) ; 
// heureCorrecte contient la valeur true 
var heurelncorrecte = reHeure. test(chaineHeurelncorrecte) ; 



Fondations de la bibliotheque dojo 



Chapitre 7 



II heurelncorrecte contient la valeur false 

var chaineNombre = "4353-756398"; 

var reChaineNombre = new RegExptdojo. regexp.numberFormat({<-< 

format: »##-####" 
})); 

var chaineNombreCorrecte = reChaineNombre. test(chaineNombre) ; 
// chaineNombreCorrecte contient la valeur true 



Support des collections 

dojo implemente differents types de collections afin de permettre la mise en oeuvre de 
structures de donnees evoluees, telles que les listes, les arbres, les queues, les piles et les 
tables de hachage. 

Cette section detaille les principales collections mises a disposition par dojo ainsi que le 
support de dojo permettant de les parcourir. 



Collections de base 

La bibliotheque dojo met en oeuvre differentes implementations des listes et des tables de 
hachage par le biais de classes telles que dojo. collections. ArrayList et dojo. collec- 
tions. Dictionnary. 

La premiere implemente une liste non triee, a l'instar de la classe ArrayList fournie par 
Java. Elle fournit differentes methodes arm d'inserer et de supprimer des elements, de 
rechercher des elements et de parcourir la liste. 

Le tableau 7. 12 recapitule les differentes methodes de la classe do jo . col 1 ecti ons . Array Li st. 
Tableau 7.12 Methodes de la classe dojo.collections.ArrayList 



Methode 


Parametre 


Description 


add 


L'element a ajouter 


Ajoute un element a la liste. 


addRange 


Le tableau contenant les elements a 
ajouter 


Ajoute une liste d'elements a la liste. 


clear 


- 


Supprime tous les elements contenus dans la liste. 


clone 


- 


Retourne une copie de la liste. 


contains 


Un element a rechercher 


Determine si l'element en parametre est contenu dans la liste. 


forEach 


Une fonction de rappel ainsi qu'even- 
tuellement son contexte d'execution 


Permet de parcourir la collection en se fondant sur une fonction de 
rappel. Cette derniere doit prendre en parametre l'element courant, 
son indice ainsi qu'un tableau representant la liste. 


getlterator 


- 


Retourne un iterateur afin de parcourir la liste. 


indexOf 


Un element 


Retourne la position de l'element passe en parametre dans la liste. 
S'il n'est pas present, la valeur -1 est renvoyee. 


insert 


Un element ainsi que I'index d'insertion 


Insere un element a une position donnee. 


item 


Un indice 


Retourne l'element correspondant a la position specifier en parametre. 
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Tableau 7.12 Methodes de la classe dojo.collections.ArrayList (suite) 



Methode 


Parametre 


Description 


remove 


Un element 


Supprime de la liste I'element passe en parametre. 


removeAt 


Un indice 


Supprime de la liste I'element dont I'index est passe en parametre. 


reverse 


- 


Inverse I'ordre des elements de la liste. 


setBylndex 


Un indice et un element 


Insere un element a un indice specifie dans la liste. 


sort 




Trie les elements de la liste. 


toArray 


- 


Convertit la liste en tableau. 


toString 


Rien ou un delimiteur 


Retourne une representation sous forme de chaine de caracteres de 
la liste. 



Le code suivant decrit la facon d'utiliser cette classe afin de creer une liste, d'ajouter des 
elements et de parcourir son contenu : 

var liste = new dojo. col lections. ArrayList( ) ; 

liste. addC'elementl") ; 

1 iste.add("element3") ; 

liste.setBylndexd , "element2") ; 

// Affiche les differents elements de la liste, inseres ci-dessus 

liste. forEach( function (element, indice, tableau) { 

alert(indice+" : "+element); 
}); 

Dans le code ci-dessus, el ement contient la valeur de I'element courant de la liste lors du 
parcours de cette derniere et indice un nombre entier correspondant a sa position. 

La seconde classe correspond a une table de hachage, c'est-a-dire une paire cle-valeur. 
Elle fournit differentes methodes afin d'inserer et de supprimer des elements, de rechercher 
des elements et de parcourir la table. 

Le tableau 7.13 recapitule les differentes methodes de la classe dojo . col 1 ecti ons . Di cti onary. 
Tableau 7.13 Methodes de la classe dojo.collections.Dictionary 

Description 

Ajoute dans la table de hachage une cle ainsi que sa valeur. 

Supprime tous les elements contenus dans la table de hachage. 

Retourne une copie de la table de hachage. 

Determine si une cle est contenue dans la table pour la cle specifiee. 

Determine si un element est contenu dans la table pour la valeur specifiee. 

Retourne I'entree contenant une cle et une valeur et correspondant a la cle 
specifiee en parametre. 

Permet de parcourir la collection en se fondant sur une fonction de rappel. 
Cette derniere doit prendre en parametre I'element courant, son indice ainsi 
qu'un tableau representant la liste. 



Methode 


Parametre 


add 


Une cle et une valeur 


clear 


- 


clone 


- 


contains 


Une cle 


containsValue 


Une valeur 


entry 


Une cle 


forEach 


Une fonction de rappel ainsi 
que, eventuellement, son 
contexte d'execution 
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Tableau 7.13 


Methodes de la classe dojo.collections.Dictionary (suite) 


Methode 


Parametre 


Description 


getlterator 


- 


Retourne I'iterateur permettant de parcourir la table de hachage. 


getKeyList 


- 


Retourne la liste des cles de la table de hachage. 


getVal ueList 




Retourne la liste des valeurs de la table de hachage. 


remove 


Unecle 


Supprime un element de la table de hachage en se fondant sur sa cle. 


item 


Unecle 


Retourne la valeur correspondant a une cle dans la table de hachage. 



Le code suivant decrit la facon d'utiliser cette classe afin de creer une table de hachage, 
d'aj outer des elements et de parcourir son contenu : 

var tableHachage = new dojo. col lections. Dictionary( ) ; 

tableHachage.addC'clel" , "elementl") ; 

tableHachage.add("cle2" , "elements") ; 

tableHachage. add ("cle3" , "element3") ; 

var listeCles = tableHachage. getKeyList( ) ; 

/* listeCles correspond au tableau [ "del", "cle2", "cle2" ] */ 

var 1 isteValeurs = tableHachage. getVal ueListt ) ; 

/* 1 isteValeurs correspond au tableau [ "elementl", " element2", " element3" ] */ 

// Affiche les differents elements de la table, inseres ci-dessus 

tableHachage. forEach(function(element, indice, tableau) { 

alert(indice+" : "+element. key+" , "+element.val ue) ; 
}); 

Dans le code ci-dessus, el ement contient la paire cle-valeur (respectivement les attributs key 
et val ue) de l'element courant de la table de hachage lors du parcours de cette derniere et 
indice un nombre entier correspondant a sa position. 

Nous verrons plus loin dans ce chapitre que ces classes peuvent utiliser le support des 
classes d' iteration afin d'etre parcourues. 



Structures de donnees avancees 

Les structures de donnees avancees fournies par dojo correspondent aux queues, aux piles, 
aux graphes et aux arbres binaires. Nous ne detaillons dans cette section que la mise en oeuvre 
des deux premieres structures. 

La premiere est implementee par la classe do jo. col lections. Queue. Cette structure corres- 
pond a une file d'attente, ou FIFO (First In First Out), dont le premier element qui lui est 
ajoute est le premier a en sortir. Une mise en oeuvre de cette structure a ete abordee au 
chapitre 2 en se fondant sur les tableaux JavaScript. 



Le tableau 7.14 recapitule les methodes de la classe do jo. col lections. Queue. 
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Tableau 7.14 


Methodes de la classe dojo.collections.Queue 


Methode 


Parametre 


Description 


clear 


- 


Supprime tous les elements contenus dans la queue. 


clone 


- 


Retourne une copie de la queue. 


contains 


Une valeur 


Determine si un element est contenu dans la queue pour la cle specifiee. 


copyTo 


Un tableau et un indice 


Copie le contenu dans la queue du tableau passe en parametre a partir de la 
position speoifiee. 


dequeue 


- 


Retourne I'element suivant de la queue et le supprime de celle-oi. 


enqueue 


Un element 


Ajoute un element a la fin de la queue. 


forEach 


Une fonction de rappel 
ainsi qu'eventuellement 
son contexte d'execution 


Permet de parcourir la collection en se fondant sur une fonction de rappel. 
Cette derniere doit prendre en parametre I'element courant, son indice ainsi 
qu'un tableau representant la liste. 


getlterator 


- 


Retourne I'iterateur permettant de parcourir la queue. 


peek 


- 


Retourne I'element suivant de la queue sans en modifier son contenu. 


toArray 


- 


Retourne une representation sous forme de tableau de la liste. 



Le code suivant decrit la mise en oeuvre de cette classe afin de traiter des donnees en se 
fondant sur une queue : 

var queue = new dojo. collections. Queue( ) ; 

queue. enqueue ( "el ementl") ; 

queue. enqueue (" el ement2" ) ; 

queue. enqueue (" el ement3" ) ; 

var premierElementSansRetrait = queue. peek( ) ; 

// premierElementSansRetrait contient la valeur "elementl" 

var elementExtrait = queue. dequeuet ) ; 

// elementExtrait contient la valeur "elementl" 

elementExtrait = queue. dequeuet ) ; 

// elementExtrait contient la valeur "element2" 

elementExtrait = queue. dequeue( ) ; 

// elementExtrait contient la valeur "element3" 

La seconde structure est implemented par la classe dojo. collections. Stack. Elle corres- 
pond a une pile, ou LIFO (Last In First Out), dans laquelle le dernier element qui lui est 
ajoute est le premier a en sortir. Une mise en ceuvre de cette structure a egalement ete 
abordee au chapitre 2 en se fondant sur les tableaux JavaScript. 

Le tableau 7.15 recapitule les methodes de la classe do jo. col lections. Stack. 
Tableau 7.15 Methodes de la classe dojo.collections.Stack 



Methode 


Parametre 




Description 


clear 


- 




Supprime tous les elements contenus dans la pile. 


clone 


- 




Retourne une copie de la pile. 


contains 


Une valeur 




Determine si un element est contenu dans la pile pour la cle specifiee. 


copyTo 


Un tableau et 


un indice 


Copie le contenu dans la pile du tableau passe en parametre a partir de la 
position specifiee. 
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Tableau 7.15 Methodes de la classe dojo.collections.Stack (suite) 



Methode 


Parametre 


Description 


forEach 


Une fonction de rappel 
ainsi qu'eventuellement 
son contexte d'execution 


Permet de parcourir la collection en se fondant sur une fonction de rappel. 
Cette derniere doit prendre en parametre I'element courant, son indice ainsi 
qu'un tableau representant la liste. 


getlterator 


- 


Retourne I'iterateur permettant de parcourir la pile. 


peek 


- 


Retourne I'element suivant de la pile sans en modifier le contenu. 


pop 


- 


Retourne I'element suivant au sommet de la pile et le supprime de celle-ci. 


push 


Un element 


Ajoute un element au sommet de la pile. 


toArray 


- 


Retourne une representation sous forme de tableau de la pile. 



Le code suivant decrit la mise en oeuvre de cette classe afin de traiter des donnees en se 
fondant sur une pile : 

jile = new dojo. col lections. Stack( ) ; 
.push( "elementl") ; 





var p 




pile. 




pile. 




pile. 




var p 




// pr 




var e 




// el 




eleme 




// el 




eleme 




// el 


Iteratei 


irs 



.push( "elements") ; 
.push("element3") ; 
jremierElementSansRetrait 



pile.peek( ) ; 



valeur "element3" 



"emierElementSansRetrait contient 

slementExtrait = pile.popO; 

lementExtrait contient la valeur "element3" 

2ntExtrait = pile.popO; 

lementExtrait contient la valeur "element2" 

2ntExtrait = pile.popO; 

lementExtrait contient la valeur "elementl" 



dojo fournit differentes classes pour parcourir les collections decrites aux sections 
precedentes. Ces classes correspondent a des iterateurs, entites permettant de se deplacer 
progressivement dans une collection. 

Le premier, implements par le biais de la classe dojo . col 1 ecti ons . Iterator, offre la possi- 
bility de parcourir des listes telles que celles implementees par les classes dojo. col lec- 
tions. Array List et dojo. col lections.SortedList. 

Le tableau 7.16 recapitule les methodes disponibles pour cette classe. 
Tableau 7.16 Methodes de la classe dojo.collections.lterator 



Methode 


Parametre 


Description 


atEnd 


- 


Determine si I'iterateur se trouve a la fin du parcours de la collection. 


get 


- 


Retourne I'element courant de I'iteration. 


map 


Une fonction de rappel ainsi qu'even- 
tuellement son contexte d'execution 


Retourne un tableau rempli en se fondant sur la fonction de rappel et 
les elements contenus dans I'iterateur d'une collection. 


reset 


- 


Reinitialise I'iterateur au debut du parcours de la collection. 
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Le code suivant decrit la mise en oeuvre de cette classe afin de parcourir une liste fondee 
sur la classe do jo. col lections. Array List : 

var liste = new dojo. collections. ArrayList( ) ; 

1 iste.addC'elementl") ; 

liste. add("element2") ; 

liste. add("element3") ; 

// Affiche les differents elements de la liste, inseres ci-dessus 

for(var iterateur = liste. getlteratorO ; !iterateur.atEnd( ) ; ) { 

var element = iterateur. get( ) j 

alertC'Element: "+element); 
} 

dojo fournit egalement la classe dojo. collections. Dictionarylterator afin de parcourir des 
tables de hachage telles que celle implementee par la classe dojo. col lections. Dictionary. 
Elle met a disposition les memes methodes que la classe dojo. col lections. Iterator. 

L element renvoye par la methode get de cette classe est desormais une structure contenant 
la cle et la valeur d'une entree dans la table de hachage. Cette structure est implementee 
par 1' intermediate de la classe do jo. col lections. Dictionary Entry. 

Le code suivant decrit la mise en ceuvre de cette classe afin de parcourir une liste fondee 
sur la classe dojo. col lections. Dictionary : 

var tableHachage = new dojo. collections. Dictionary( ) ; 
tableHachage.add( "clel" , "elementl") ; 
tableHachage. add ( "cle2" , "element2") ; 
tableHachage. add ( "cle3" , "element3") ; 
// Affiche les differents elements de 
fortvar i = tableHachage. getlteratort ) 

var element = i .get( ) ; 

alertC'Element: "+element.key+" , "+element. value 
} 



a table, inseres ci-dessus 
M.atEndO; ) { 



Support du DOM 

La bibliotheque dojo fournit deux fonctions permettant d'acceder aux elements de l'arbre 
DOM d'une page HTML. Aucun module ne doit etre specifie afin de les utiliser, car elles 
font partie des fonctions centrales de dojo. 

La fonction do jo. by Id retourne un element DOM en se fondant sur son identifiant. Elle 
encapsule la methode getElementByld de l'objet document d'une page HTML. 

La fonction dojo . byTag retourne un tableau d'elements DOM en se fondant sur un nom 
de balise. Elle encapsule la methode getElementsByTagName de l'objet document d'une 
page HTML. 

Afin de detailler le support du DOM par dojo, nous allons reprendre dans cette section 
l'exemple utilise au chapitre 4 : 
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<div id="maZone"> 

<span id="monTexte"Xb>Un texte</b></span> 

<di v id="monAutreZone"> 
<p>Un autre texte</p> 

</div> 
</div> 

L'exemple suivant decrit la mise en oeuvre des fonctions dojo.byld et dojo.byTag en se 
fondant sur le fragment HTML ci-dessus : 

var zone = dojo.byId( "maZone" ) ; 

// zone contient la reference a la premiere balise 

var listeBalises = dojo.byTagC'di v") ; 

// listeBalises contient les differentes balises dont le nom est div 

En plus de ces deux fonctions, dojo offre un support permettant de manipuler l'arbre 
DOM d'une page Web par 1' intermediate de son module dojo . dom. Ce module fournit un 
ensemble de constantes et de fonctions a cet effet. 

Le tableau 7.17 recapitule les principales constantes relatives au type du noeud DOM. 
Tableau 7.17 Principales constantes relatives au type du noeud DOM 



Constante 


Valeur 


Description 


dojo. dom. ELEMENT_NODE 


1 


Correspond a un nceud. 


dojo. dom. ATTRIBUTE_NODE 


2 


Correspond a un attribut. 


dojo. dom. TEXT_N0DE 


3 


Correspond a un noeud de texte. 


dojo.dom.CDATA_SECTION_NODE 


4 


Correspond a un noeud de type CDATA. 


dojo. dom. ENTITY_NODE 


6 


Correspond a une entite XML. 


dojo. dom. C0MMENT_N0DE 


8 


Correspond a un commentaire. 


dojo. dom. D0CUMENT_N0DE 


9 


Correspond a un nceud racine d'un document XML. 



Ce module met egalement a disposition differentes fonctions utilitaires arm de faciliter la 
manipulation des elements DOM. Le tableau 7.18 recapitule ces fonctions. 

Tableau 7.18 Fonctions de manipulation d'elements DOM 



Fonction 


Parametre 


Description 


dojo.dom.copyChildren 


Un noeud source, un nceud 
cible et un drapeau 


Copie tous les elements enfants d'une balise source vers une 
balise destination. Si la valeur du troisieme parametre vaut 
true, tous les elements enfants de type texte sont supprimes. 


dojo .dom. createDocument 


- 


Cree un nceud de type document. 


dojo.dom.createDocument- 
FromText 


- 


Cree un nceud de type document et Unitialise en se fondant 
sur du code XML contenu dans une chaine de caracteres. 


do jo. dom. first Element 


Un nceud et un nom 
de balise 


Retourne le premier element enfant de type : 

dojo .dom. ELEMENT_NODE d'un nceud. Si un nom de balise est 

specifie, la fonction retourne le premier element correspondant. 
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Tableau 7.18 Fonctions de manipulation d'elements DOM (suite) 



Fonction 

dojo.dom.getAncestors 



dojo.dom.getAncestorsByTag 



Parametre 

Un noeud, une fonction 
de rappel et un drapeau 



Un nceud, un nom 
de balise et un drapeau 



dojo.dom 
ByTag 


getFirstAncestor- 


Un nceud et un nom 
de balise 


dojo.dom 


getUniqueld 


- 


dojo.dom 


hasParent 


Un nceud 


dojo.dom 


innerXML 


Un nceud 


dojo.dom 


insertAfter 


Un nceud de reference, un 
nceud a inserer et un dra- 
peau 


dojo.dom 


insertAtlndex 


Un nceud a inserer, un 
nceud cible pour I'insertion 
et un indice 


dojo.dom 


insertAtPosition 


Un nceud de reference, un 
nceud a inserer et une posi- 
tion 


dojo.dom 


insertBefore 


Un nceud de reference, un 
nceud a inserer et un dra- 
peau 



dojo.dom.isDescendantOf 

dojo.dom.isNode 
dojo.dom. isTag 

dojo.dom. last Element 

dojo.dom. mo veChildren 

do jo .dom. next El ement 



Un nceud, un nceud parent 
potentiel et un drapeau 



Description 

Retourne la liste des parents d'un nceud en appliquant even- 
tuellement un filtrage. Ce dernier est implements par une 
fonction de rappel. Si elle n'est pas specifiee, aucun filtrage 
n'est realise. Si la valeur du troisieme element vaut true, 
retourne uniquement le premier element correspondant. 

Retourne la liste des parents d'un noeud correspondant au 
nom de balise specifie. Si la valeur du troisieme element vaut 
true, retourne uniquement le premier element correspondant. 

Retourne le premier parent d'un noeud correspondant au nom 
de balise specifie. 

Genere un identifiant unique. 

Determine si un nceud est un enfant d'un autre. 

Correspond au contenu d'un noeud au format XML. 

Ajoute un nceud au meme niveau et apres un nceud de refe- 
rence. Si les deux nceuds en parametres sont egaux ou le 
nceud a inserer se trouve deja avec le nceud de reference, le 
nceud n'est ajoute que si le drapeau vaut true. 

Ajoute un nceud dans la liste des enfants d'un nceud cible. Si 
la valeur de I'indice est superieure au nombre des enfants du 
nceud, il est ajoute en derniere position. 

Ajoute un nceud au meme niveau qu'un nceud de reference. 
La position du nceud insere depend du parametre de position, 
lequel peut prend les valeurs before, after, f 1 rst ou last. 
Son omission correspond a la valeur last. 

Ajoute un noeud au meme niveau et avant un nceud de refe- 
rence. Si les deux nceuds en parametres sont egaux ou le 
nceud a inserer se trouve deja avec le nceud de reference, le 
nceud n'est ajoute que si le drapeau vaut true. 

Determine si un nceud correspond a un enfant d'un autre 
nceud. Si la valeur du troisieme element vaut true, realise la 
fonctionnalite au sens strict. 



Un element de I'arbre DOM Determine si le parametre est un nceud. 



Un nceud et differents noms 
de balises 

Un nceud et un nom 
de balise 

Un nceud source, un nceud 
cible et un drapeau 

Un nceud et un nom 
de balise 



Determine si un nceud correspond a un des noms de balise 
passes en parametres. Si tel est le cas, le nom correspondant 
est retourne. 

Retourne le dernier element enfant de type : 

dojo.dom. ELEMENT_NODE d'un nceud. Si un nom de balise est 

specifie, la fonction retourne le dernier element correspondant. 

Deplace tous les elements enfants d'une balise source vers 
une balise destination. Si la valeur du troisieme parametre 
vaut vrai, tous les elements enfant de type texte sont supprimes. 

Retourne I'element suivant de type : 

dojo.dom. ELEMENT_NODE d'un noeud. Si un nom de balise est 

specifie, la fonction retourne I'element suivant correspondant. 
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Tableau 7.18 Fonctions de manipulation d'elements DOM (suite) 

Description 

Ajoute un noeud en premiere position des enfants d'un autre 
noeud. 

Retourne I'element precedant de type : 
dojo.dom.ELEMENT_NODE d'un noeud. Si un nom de balise 
est specifie, la fonotion retourne I'element precedant corres- 
pondent. 

Supprime tous les elements enfants d'un noeud. 

Supprime le noeud specifie de son noeud pere. 

Supprime tous les elements enfants d'un noeud et lui ajoute le 
noeud specifie en second parametre. 

Correspond a rimplementation de la methode setAttributNS 
du DOM niveau 2. 



Fonction 




Parametre 


dojo.dom 


prependChild 


Un noeud a inserer et un 
nceud sous lequel inserer 


dojo.dom 


prevElement 


Un noeud et un nom 
de balise 


dojo.dom 


removeChildren 


Un noeud 


dojo.dom 


removeNode 


Un noeud 


dojo.dom 


replaceChildren 


Un noeud source 
et un nceud a ajouter 


dojo.dom 


setAttributeNS 


Un noeud, un espace de 
nommage et un nom et une 
valeur d'attribut 



dojo.dom.textContent 



Un nceud et eventuellement 
une chaine de caracteres 



Correspond a rimplementation de I'attribut textContent du 
DOM niveau 3. 



La fonction dojo.dom.moveChildren permet de deplacer tous les noeuds enfants d'un noeud 
vers un autre. Le code suivant decrit la facon d'utiliser cette fonction arm de deplacer les 
enfants de la balise span d'identifiant monTexte dans la balise di v d'identifiant monAutreZone : 

Ivar parentSource = dojo. byld( "monTexte") ; 
var parentCible - dojo.byId("monAutreZone" ) ; 
dojo.dom.moveChildrentparentSource, parentCible, false); 

Ce code permet de modifier l'arbre DOM en memoire de la page arm d'obtenir le resultat 
suivant : 

<div id="maZone"> 

<span id="monTexte"X/span> 
<div id="monAutreZone"> 
<b>Un texte</b><-0 
<p>Un autre texte</p> 
</div> 
</div> 

Le repere O met en valeur le bloc deplace par l'utilisation de la fonction dojo.dom.move- 
Children. 

La fonction dojo.dom. removeChildren offre la possibility de supprimer tous les noeuds 
enfants d'un noeud. Le code suivant permet de supprimer tout le contenu de la balise span 
d'identifiant monTexte : 

Ivar source = dojo.byldC'monTexte" ) ; 
dojo.dom. removeChildren (source) ; 
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Le code ci-dessus permet d'obtenir l'arbre DOM en memoire de la page suivante : 

<div id="maZone"> 

<span id="monTexte"X/span><-0 

<di v id="monAutreZone"> 
<p>Un autre texte</p> 

</div> 
</div> 

Le repere O met en valeur le bloc dans lequel les nceuds enfants ont ete supprimes par 
l'utilisation de lafonction dojo.dom.removeChildren. 

D'autres fonctions, telles que dojo.dom.insertBefore et dojo.dom.insertAfter, permettent 
d'inserer des elements a differentes positions dans l'arbre DOM d'une page. 

Ces fonctions ajoutent respectivement des noeuds avant et apres un noeud de reference. Le 
code suivant implemente la facon d'ajouter un texte en italique (balise 1) avant et apres le 
texte en gras (balise b) : 

var bal iseltal iqueAvant = document. createElementC'i ") ; 
var texteltalique = document .createTextNode( "Ital ique") ; 
bal iseltal iqueAvant. appendChild(texteItal ique) ; 
var bal iseltal iqueApres = bal iseltaliqueAvant.clone(true) ; 
var source - dojo.byldt "monTexte" ) ; 
var baliseGras = source. childNodes[0] ; 
dojo.dom.insertBefore (bal iseltal iqueAvant, bal iseGras) ; 
dojo.dom.insertAfter (bal iseltal iqueApres , bal iseGras) ; 

Le code ci-dessus permet d'obtenir l'arbre DOM en memoire de la page suivante : 

<div id="maZone"> 

<span id="monTexte"> 

<i>Italique</i><-© 

<b>Un texte</b><-© 

<i>Italique</i><-© 

</span> 

<div id="monAutreZone"> 

<p>Un autre texte</p> 
</div> 
</div> 

Les reperes O et © mettent respectivement en valeur les blocs ajoutes avant et apres le 
bloc identifie par le repere© par l'utilisation des fonctions dojo.dom.insertBefore et 
dojo.dom.insertAfter. 

Dans le code JavaScript ci-dessus, les fonctions dojo.createElement et createTextNode 
du DOM sont utilisees arm de creer les noeuds a inserer. Ces fonctions ont ete abordees 
au chapitre 4. 

La fonction do jo . dom . prependChi 1 d peut etre utilisee en complement des deux precedentes 
arm d'ajouter un enfant a un nceud, meme s'il n'en possede pas. 
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Pour finir, differentes fonctions offrent la possibility d'acceder a differents noeuds de 
l'arbre DOM de maniere relative a un noeud. Ainsi, les fonctions dojo.dom.firstElement, 
dojo.dom.lastElement, do jo.dom.prev Element et do jo.dom. next Element permettent respecti- 
vement d' avoir le premier et le dernier noeud d'un ensemble de noeuds ainsi que les noeuds 
precedant et suivant un noeud. 

Le code suivant decrit la mise en oeuvre de ces fonctions sur le fragment HTML utilise 
dans cette section : 



var element = dojo.byldt "maZone") ; 
var premierElement = dojo.dom.firstElement(element) ; 
// premierElement correspond a l'element d'identifiant 
var dernierElement = dojo.dom.lastElement(element) ; 
/* dernierElement correspond a l'element d'identifiant 

"monAutreZone" */ 
var precedentElement = dojo.dom.prevElement(element) ; 
/* precedentElement est null puisqu'il n'y a pas 

d'element precedent */ 
var suivantElement = dojo.dom.nextElement(element) ; 
/* dernierElement correspond a l'element d'identifiant 

"monAutreZone" */ 



'monTexte" 



Support des techniques Ajax 

La bibliotheque dojo offre un interessant support afin de mettre en oeuvre simplement les 
techniques Ajax ainsi que l'appel a des services distants. 

Dans cette section, nous abordons les mecanismes fondes sur la fonction generique 
dojo . i o . bi nd, dont l'objectif est d'abstraire des mecanismes sous-jacents et de permeate ainsi 
de s'adapter au mieux au contexte d'execution de l'application qui utilise cette fonction. 



Fonction dojo.io.bind 

La fonction dojo.io.bind correspond a l'entite centrale du support d'Ajax par la biblio- 
theque dojo. Elle integre tous les mecanismes permettant d'envoyer une requete a partir 
d'une page sans la recharger et de recevoir la reponse correspondante. 

Elle prend en parametre un tableau associatif, qui permet de specifier les differents attributs 
de configuration ainsi que les fonctions de rappel de la requete. 

Le code suivant decrit un exemple simple d'utilisation de la fonction doj o . i o . bi nd : 

var proprietes = { 
url : "rnonUrl " , 
mimetype: "text/plain", 
load: function(type, data) { 

// traitement de donnees texte 

(...) 



dojo.io.bind (proprietes) ; 
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Le tableau 7. 19 recapitule les principaux attributs supportes par la fonction doj o . i o . bi nd. 
Tableau 7.19 Principaux attributs supportees par la fonction dojo.io.bind 



Attribut 

content 

formNode 

method 

mimetype 

multipart 

sync 

timeoutSeconds 

transport 

url 

useCache 




Description 

Contenu de la requete sous forme de tableau associatif 

Element correspondent au formulaire a soumettre. 

Methode HTTP a utiliser afin d'envoyer la requete 

Type de contenu renvoye par la ressource. La fonction gere de fagon differente les differents types de contenus. 

Specifie si la requete est multipart, c'est-a-dire si elle contient plusieurs parties, pour I'envoi d'un formulaire. 
Cette fonctionnalite n'est pas supportee par toutes les couches de transport. 

Specifie si la requete est synchrone. Les valeurs possibles sont true ou f al se. 

Delai d'attente maximal durant lequel la reponse doit etre recue. 

Specifie explicitement la couche de transport a utiliser. 

URL de la ressource 

Specifie si un cache doit etre mis en ceuvre. 



Le tableau 7.20 recapitule les fonctions de rappel gerees par la fonction dojo.io.bind. 
Tableau 7.20 Fonctions de rappel supportees par la fonction dojo.io.bind 



Fonction 

error 
handle 



load 



timeout 



Parametre 

Le type d'evenement et I'erreur survenue 

Le type d'evenement, les donnees et 
eventuellement I'instance de transport uti- 
lisee 

Le type d'evenement, les donnees et even- 
tuellement I'instance de transport utilisee 



Description 

Appelee en cas d'erreur lors de I'envoi de la requete. 

Fonction de rappel generique. Elle est appelee en cas de succes ou 
d'erreur de la requete dans lecasou les methode error et load ne 
sont pas specifies. 

Appelee en cas de succes de la requete lorsque les resultats de la 
reponse sont recus. 

Appelee lorsque la reponse n'a pas ete recue dans le delai d'attente 
maximal specifie. Est utilisee conjointement avec I'attribut ti meout- 
Seconds. 



Traitement du resultat d'une requete 

Les parametres passes a la requete permettent de specifier des fonctions de rappel afin de 
traiter les donnees renvoyees. En cas de succes de la requete, dojo offre la possibility 
d' utiliser la fonction de rappel handleou load. 

La fonction 1 oad permet de traiter exclusivement une requete executee avec succes. Cette 
fonction prend en parametre le cas dans lequel on se trouve, les donnees et eventuelle- 
ment une instance correspondant a l'evenement. 

Le code suivant decrit la mise en oeuvre de cette fonction de rappel afin de traiter les 
donnees recues suite a une requete : 
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var proprietes = { 

url : "monUrl " , 

mimetype: "text/plain", 

load: function(type, data) { 

/* type contient « load » et data les donnees recues sous forme de texte */ 

) 
}; 
do jo.io. bind (proprietes) ; 

La fonction handl e ne peut etre utilisee que lorsque la fonction 1 oad n'est pas definie. Elle 
est beaucoup plus generale puisqu'elle permet de traiter aussi bien le succes que l'echec 
d'une requete. 

Le code suivant decrit la mise en ceuvre de cette fonction de rappel : 

var proprietes = { 
url : "monUrl " , 
mimetype: "text/plain", 
handle: function(type, data) { 
if( type == "load" ) { 

// Tout s'est bien passe 
} else if( type == "error" ) { 

// Une erreur s'est produite 
} else { 

// Dans tous les autres cas 



do jo.io. bind (proprietes) ; 

Gestion des erreurs 

Bien que la fonction de rappel handle permette de gerer les erreurs survenues lors d'une 
requete Ajax, la fonction de rappel error peut etre mise en oeuvre afin de les gerer de 
maniere specifique, a l'instar de la fonction 1 oad. 

La fonction error prend en parametre le cas dans lequel on se trouve ainsi que l'erreur 
qui s'est produite. 

Le code suivant decrit la mise en oeuvre de la fonction de rappel error pour gerer les 
erreurs survenues lors de la requete : 

var proprietes = { 
url : "monUrl " , 
mimetype: "text/plain", 
error: function (type, error) { 
(...) 



do jo.io. bind (proprietes) ; 
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Formats de reponse 

dojo supporte nativement differents formats de reponse. II peut ainsi realiser un traitement 
avant de passer les donnees recues aux fonctions de rappel. 

La propriete mimetype offre la possibilite de specifier a dojo le format de donnees attendu. 
La bibliotheque sait de la sorte comment traiter les donnees recues dans la reponse de la 
requete Ajax. 

Le tableau 7.21 recapitule les formats de reponse supportes. 

Tableau 7.21 Formats de reponse supportes par la fonction dojo.io.bind 



Format 



Description 



text/pl ain Correspond a un format texte. Dans ce cas, dojo ne realise aucun traitement avant de fournir le contenu 

aux fonctions de rappel. 

text/ javascript Correspond a un format contenant du code JavaScript, dojo evalue ce dernier et fournit I'objet resultant 
aux fonctions de rappel. 

text/xml Correspond a un format XML. Dans ce cas, dojo fournit le contenu aux fonctions de rappel sous forme de 

document XML. 

text/json Correspond a un format JSON. Dans ce cas, dojo construit des objets JavaScript correspondant aux don- 

nees regues en se fondant sur ce format. 



Le code suivant decrit la mise en ceuvre du format text/json : 

var proprietes = { 
url : "monUrl " , 
mimetype: "text/json", 
load: function (type, donnees, transport) { 
fort var element in donnees ) { 

dojo.debugtelement, ":", donnees[element]) ; 



}; 

dojo. io.bind( proprietes) ; 

Cet exemple affiche le resultat suivant en se fondant sur le contenu de la reponse decrit 
plus bas : 



DEBUG 
DEBUG 
DEBUG 



now : Wed Aug 23 2006 15:44:19 GMT+0200 
elementl : Valeur de 1 'element 1 
element2 : Valeur de 1 'element 2 



Le contenu de la reponse recue correspond au texte suivant 



now: new Date( ) , 

elementl: "Valeur de 1 'element 1", 

element2: "Valeur de 1 'element 2" 



Fondations de la bibliotheque dojo 



Chapitre 7 

Classes de transport disponibles 

Bien que la bibliotheque dojo offre une unique fonction, dojo. io. bind, elle implemente 
differents mecanismes internes afin de mettre en oeuvre Ajax. Ces implementations, qui ne 
sont pas toutes fondees sur la classe XMLHttpRequest, permettent de resoudre des proble- 
matiques particulieres, telles que les contraintes de securites issues de cette classe, qui 
empechent l'appel d'une adresse d'un autre domaine. 

Le tableau 7.22 recapitule les principales couches de transport fournies par la bibliotheque. 

Tableau 7.22 Principales couches de transport fournies par dojo 

Couche de transport Description 

If rameTransport Se fonde sur une iframe cachee utilisee afin d'executer des requetes Ajax. Le principal interet de cette 

couche de transport reside dans sa capacite a mettre en oeuvre I'envoi de fichier (upload) avec Ajax 
tout en offrant la possibilite de realiser des requetes Ajax sur un autre domaine. 

ScriptSrcTransport Se fonde sur un element HTML script genere alavolee afin de mettre en ceuvre Ajax. Le principal 
interet de cette approche reside dans la possibilite de realiser des requetes Ajax sur un autre domaine . 

XMLHTTPTransport Se fonde sur la classe XMLHttpRequest pour executer les requetes Ajax. 

dojo detecte automatiquement 1' implementation de transport la plus appropriee. II est 
cependant possible d'en specifier une explicitement par 1' intermediate de l'attribut 
transport dans les parametres de la fonction dojo.io.bind. 

Le code suivant decrit l'utilisation de ce mecanisme afin d'utiliser une couche de transport 
fondee sur XMLHttpRequest (repere O) : 

var proprietes = { 

url : "monllrl " , 

(...) 

mimetype: "text/plain", 

transport: "XMLHTTPTransport" <-© 
}; 
dojo.io.bind (proprietes) ; 

Ces differentes couches de transport ne possedent pas les memes caracteristiques et sont 
mises en oeuvre de maniere transparente suivant les fonctionnalites utilisees. C'est le cas, 
par exemple, de I'envoi de fichier et de la gestion des boutons Precedent et Suivant dans 
le cadre d'Ajax, qui se fondent sur la classe If rameTransport. 



Support de RPC 



dojo offre la possibilite d'appeler un service distant de maniere normalisee. La bibliotheque 
supporte differents protocoles dont JSON-RPC et celui des services Yahoo!. 

Ces differents supports se fondent sur la methode dojo . i o . bi nd decrite a la section precedente 
afin d'envoyer les requetes et de recevoir leurs reponses. 
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Plutot que d'implementer chaque fois les mecanismes d'appel aux services, dojo offre la 
possibility de decrire par l'intermediaire d'un tableau associatif les caracteristiques des 
services. Le format de ce tableau est appele SMD (Simple Method Description). Ce 
mecanisme permet de generaliser les traitements decrits dans le code suivant : 

function traiterResul tats(type, data, event) ( 

(...) 
} 

var methodeService - function(parametrel , parametre2) { 
var parametresRequete = { parametrel: parametrel, 

parametre2: parametre2 }; 
dojo.io.bind( { 
url : "monUrl " , 
load: traiterResul tats, 
mimetype: "text/plain", 
content: parametresRequete 
}); 
}; 

// Execution du service 
methodeService ("parametrel" , "parametre2") ; 

Avec la syntaxe SMD, le service ci-dessus est decrit de la maniere suivante : 



"serviceType" 


"JSON 


-RPC", 


"serviceURL" : 


"monllr 


", 


"methods": [ 
{ 

"name' 






: "methodeService", 


"parameters" 


[ 


{ 


"name" 


"parametrel 


{ 


"name" 


"parametre2 


] 







] 
} 

Ann de mettre en ceuvre JSON-RPC, dojo fournit la classe dojo.rpc.JsonService, qui 
prend en compte la description precedente. Cette classe etend la classe generique 
dojo.rpc.RpcService, laquelle contient toute la logique d' interpretation du format de 
description des services. 

Le code suivant decrit la mise en oeuvre de la classe dojo.rpc.JsonService : 

// le contenu de description correspond au code JSON ci-dessus 
var description = "maDescriptionDeService.smd" ; 
var monService = dojo.rpc. JsonService(description) ; 
monService. methodeService ("parametrel" , "parametre2" ) ; 

Ann de recevoir la reponse de la requete, l'appel des methodes du service renvoie des 
objets sur lesquels des observateurs peuvent etre enregistres par l'intermediaire de leur 
methode addCal 1 back. Ces derniers sont notifies lorsque la reponse a la requete est regue. 
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De plus, la methode de l'observateur prend en parametre le resultat contenu dans la reponse. 

Le code suivant decrit la mise en oeuvre de cette methode : 

function traiterResultatstresul tat) { 
(...) 



(. 



) 



var reception = monService.methodeServiceC'parametrel" , "parametre2" ) ; 
reception.addCal IbackttraiterResul tats) ; 

Nous detaillons au chapitre 141'utilisationdelaclasse dojo.rpc.YahooService afind'acceder 
aux services offerts par Yahoo!. 



Soumission de formulaire 

La bibliotheque dojo offre la possibility d'envoyer de maniere transparente les donnees 
d'un formulaire en utilisant une requete Ajax. 

La mise en oeuvre de cette fonctionnalite est tres simple, puisqu'elle se fonde sur l'option 
formNode, qui reference le noeud correspondant au formulaire. La bibliotheque se charge 
de determiner les elements du formulaire et de les utiliser afin de construire les donnees 
contenues dans la requete Ajax. 

Le code suivant decrit la mise en oeuvre de cette fonctionnalite : 

var proprietes = { 
url : "monUrl " , 
mimetype: "text/plain", 
formNode: do jo. by Id ( "monFormul aire") , 
load: function(type, data) { 

// traitement de donnees texte 

(...) 



do jo.io. bind (proprietes) ; 

Le code ci-dessus se fonde sur le formulaire d'une page HTML decrit ci-dessous : 

<html> 
(...) 
<body> 
(...) 
<form id="monFormulai re"> 

<input type="hidden" name="champl" val ue="valeurl"/> 
<input type="text" name="champ2" value="valeur2"/> 
</form> 
(...) 
</body> 
</html> 
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En resume 



La bibliotheque dojo met 1' accent sur la simplicite d'utilisation pour son support des 
techniques Ajax. Ainsi, la fonction centrale du support, dojo.io.bind, masque toute la 
complexite de mise en oeuvre d'Ajax et integre des mecanismes de determination auto- 
matique des algorithmes a utiliser en fonction du contexte. 

Dans cette section, nous avons detaille les fonctionnalites de base de la fonction 
dojo.io.bind, telles que l'envoi de requetes Ajax, le traitement des reponses, la gestion 
des erreurs ou le support des differents types de donnees recues. 

Cette fonction offre la possibility de gerer les boutons Precedent et Suivant du naviga- 
teur par 1' intermediate de fonctions de rappel. Elle permet egalement de mettre a jour 
l'adresse d'une page HTML suite a une requete Ajax afin de permettre leur histori- 
sation. 



Traces applicatives 

La bibliotheque dojo met a disposition un outil generique permettant de gerer des traces 
applicatives. II est defini dans le module dojo . 1 oggi ng . Logger, qui doit etre inclus par l'inter- 
mediaire de la methode dojo. requi re. 

Linclusion du module cree un objet dojo. log qui permet d'ecrire des traces pour un 
niveau donne. 

Le tableau 7.23 recapitule les differentes methodes utihsables de cet objet afin d'ecrire des 
traces applicatives. Chacune de ces methodes prend en parametre un message sous forme 
de chaine de caracteres. 

Tableau 7.23 Methodes de mise en oeuvre des traces applicatives 

Methode Description 

dojo. log. debug Ajoute une trace applicative avec le niveau debug, 

dojo. log. info Ajoute une trace applicative avec le niveau info (information), 

do jo. log. warn Ajoute une trace applicative avec le niveau warn (avertissement). 

do jo. log. err Ajoute une trace applicative avec le niveau err (erreur). 

dojo.log.crit Ajoute une trace applicative avec le niveau crit (erreur critique), 
dojo. log. exception Ajoute une trace applicative pour la levee d'une exception. 



L' activation du mode de debogage se realise par le biais de l'objet djConfig et de sa 
propriete i sDebug. Si la valeur de cette derniere est true, toutes les traces applicatives sont 
affichees. Dans le cas contraire, ne sont affiches que les messages a caractere fatal, tels 
ceux relatifs a des levees d'exception. 
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Le code suivant decrit la configuration des traces affichees : 

<html> 
<head> 
(...) 

<script>djConfig = { isDebug: true }</script> 

<script language="JavaScript" type="text/javascript" src=" . ./. ./dojo. js"> 
**</script> 

<script language="JavaScript" type="text/javascript"> 
dojo.requi re( "do jo. logging. Logger" ) ; 
(...) 
</script> 
</head> 
(...) 
</body> 

L' utilisation de ce support se realise simplement par le biais des fonctions recapitulees au 
tableau 7.23, comme dans le code suivant : 

<html> 
<head> 
(...) 

<script>djConfig = { isDebug: true }</script> 
<script language="JavaScript" type="text/javascript" 

src=" . ./. ./dojo. js"X/script> 
<script language="JavaScript" type="text/javascript"> 
dojo.requi re( "do jo. logging. Logger" ) ; 
dojo.addOnLoad(function( ) { 

var messagel = "affichage avec dojo. log. debug( )" ; 

dojo.log.debug(messagel) ; 

var message2 = "affichage avec dojo. log. info( )" ; 

dojo.log.info(message2) ; 

var message3 = "affichage avec dojo. log. warn( )" ; 

dojo.log.warn(message3) ; 

var message4 = "affichage avec dojo. log. err( )" ; 

dojo. log. err (message4) ; 

var message5 = "affichage avec dojo. log. crit( )" ; 

dojo.log.crit(message5) ; 

var message6 = "affichage avec dojo. log. exception( )" ; 

try{ 

do jo. raise Cune exception" ) ; 
} catch(err) { 

dojo. log. exception(message6, err, true); 
} 
)); 
</script> 
</head> 
<body> 

<p>Page de tests de l'outil de traces de dojo...</p> 
</body> 
</html> 
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dojo offre la possibility de filtrer les traces en fonction de leur criticite. Le code suivant en 
donne un exemple de mise en oeuvre : 

// Positionnement du niveau souhaite 

do jo. log. set Level (do jo. log. get Level ( "WARNING")) ; 

// Ecriture des traces applicatives 

dojo. log. infoC'Trace applicative d' informations. ") ; 

dojo. log. warnC'Trace applicative d'avertissement. ") ; 

Dans le code ci-dessus, seul le second message est affiche. 

La figure 7.4 illustre 1'affichage des traces applicatives de la page HTML, lesquelles sont 
ajoutees a la fin des pages. 

Page de tests de I'outil de traces de Dojo. . , 

DEBUG: 12:36:27: affichage avec dojo. log. debug() 

INFO: 12:36:27: affichage avec dojo, log. info() 

WARNING: 12:36:27: affichage avec dojo, log, warn() 

ERROR: 12:36:27: affichage avec dojo, log. err() 

CRITICAL: 12:36:27: affichage avec dojo. log, crit() 

FATAL: une exception 

ERROR: 12:36:27: affichage avec dojo, log. exception() Error : une exception : file:///C:/_applications/dojo-nightly/src/bootstrapl,js : line 249 



Figure 7.4 

Affichage des traces applicatives dans une page HTML 

Notons la presence du module dojo. debug. Fi rebug, qui permet d'ecrire les traces dans la 
console de I'outil de debogage de Firefox. 

Mesure des performances 

La bibliotheque dojo fournit un interessant module permettant de mesurer les temps d' execution 
de fonctions ou de methodes d'objets. Ce support est localise dans le module dojo . prof i 1 e. 

Comme le montre le code suivant, avant son utilisation et son importation (repere ©), 
F application doit reinitialiser (repere O) les enregistrements des temps d' execution existants : 

I delete dojo["profile"] ; <-0 
dojo.requi re( "dojo. profile") ; <-© 
(...) 

Par la suite, afin d'enregistrer les temps d'execution des traitements, le code suivant indique 
comment le support met a disposition les methodes start (repere O) et end (repere ©) 
afin de delimiter respectivement le debut et la fin de l'enregistrement tout en lui assignant 
un nom logique (repere O) : 

function fonctionK) { (...) } 

do jo. profile, start ("fonctionl") ; <-© 

fonctionK ) ; 

do j o. profile. end ( "fonctionl") ; <-© 
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Notons que l'objet dojo. profile a ete automatiquement instancie lors de l'inclusion 
du module. 

Dans le code suivant, l'objet dojo.profile met a disposition la methode dump (repere O) afin 
d'afficher les resultats dans une page Web : 

(...) 

dojo. profile. start ("fonctionl" ) ; 

fonctionK ) ; 

dojo. prof ile.end( "fonctionl") ; 

(...) 

do jo. profile, dump (true) ; <-© 

Notons que la methode dump prend un parametre permettant de specifier si le tableau de 
resultat doit etre automatiquement insere dans la page Web (valeur true). Si la valeur du 
parametre est f al se, le tableau retourne par la methode doit etre ajoute manuellement 
a la page. 

Le code suivant fournit un exemple de mise en oeuvre de ce module par l'intermediaire 
d'un exemple complet : 

// Reinitialisation des enregistrements 
delete dojo["profile"] ; 
// Importation du module 
dojo.requi ret "dojo. profile") ; 

function fonctionK) { 

var nombre = 0; 

for(var cpt=0;cpt<100;cpt++) { 
nombre = nombre % 5 + cpt; 

) 
} 

function fonction2() { 
var chaine = ""; 
var motif = "element, " ; 
for(var cpt=0;cpt<1000;cpt++) { 
chaine = chaine + motif; 



// Mesure du temps d'execution de la fonction fonctionl 

dojo. profile. start ("fonctionl" ) ; 

fonctionK ) ; 

dojo. prof ile.end( "fonctionl") ; 

// Mesure du temps d'execution de la fonction fonctionl 

dojo. profile. start ("fonction2" ) ; 

fonction2() ; 

do j o. profile. end ( "fonction2") ; 

// Affichage des temps d'execution mesures 

do jo. profile. dump (true) ; 
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La figure 7.5 illustre l'affichage du tableau recapitulant les temps d'execution mesures. 



Page de calcul de performances de Dojo, , , 
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Figure 7.5 

Tableau recapitulatif des temps d'execution 



Conclusion 



La bibliotheque dojo fournit d'interessants mecanismes afin de mettre en oeuvre des 
applications JavaScript evoluees. Integrant un mecanisme de chargement a la demande 
des modules souhaites, elle permet d'alleger la quantite de code JavaScript charge dans le 
navigateur. 

La bibliotheque est structuree en modules adressant une fonctionnalite particuliere. Les 
differentes fonctionnalites mises a disposition correspondent a des fonctions facilitant la 
mise en oeuvre de JavaScript, les types de base et les collections ainsi que les techno- 
logies DOM et Ajax. 

La bibliotheque dojo fournit un interessant support afin de developper des applications Web. 
Ce support integre des modules contenant des fonctions utilitaires relatives aux langages 
HTML et CSS. II possede en outre des mecanismes permettant de gerer les evenements et de 
structurer les composants graphiques. 

La bibliotheque dojo contient enfin des implementations predefinies de divers compo- 
sants graphiques, tels que les arbres, les tableaux, les menus et les fenetres flottantes. 

Nous detaillons au chapitre 1 1 le support de cette bibliotheque pour le developpement 
d' applications Web riches. 



Partie 



Programmation 
graphique Web 
avec JavaScript 



Cette partie se penche sur les differents langages, mecanismes et techniques a mettre 
en oeuvre afin de developper des applications graphiques pour le Web avec JavaScript. 

Le chapitre 8 introduit l'utilisation conjointe des langages HTML (ou xHTML), CSS 
et JavaScript. Apres avoir rappele les differents concepts de ces langages, il decrit la 
facon dont ils peuvent interagir entre eux et la maniere de structurer les applications 
Web qui les utilisent. 

Le chapitre 9 se penche sur les differentes techniques permettant de developper des 
composants graphiques en se fondant sur le langage JavaScript. La mise en oeuvre de 
ces techniques permet de realiser des applications Web plus maintenables et evolutives. 
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Une page Web peut contenir differents langages afin de resoudre diverses problematiques, 
telles que la definition de sa structure, de son affichage et de ses traitements. Ces langages 
peuvent etre relies les uns avec les autres et eventuellement interagir entre eux. 

Le langage HTML et son successeur, le xHTML, permettent de definir la structure d'une 
page Web ainsi que, eventuellement, quelques fonctions graphiques. 

Le langage CSS adresse exclusivement les aspects graphiques d'une page Web en se fondant 
sur la structure precedemment definie en HTML. 

JavaScript offre la possibilite de mettre en oeuvre des traitements internes a la page Web. 
Ces derniers peuvent interagir avec sa structure interne en memoire afin de la modifier, 
mais peuvent egalement etre declenches suite a des evenements utilisateur ou internes. 

La figure 8.1 illustre les differents langages utilisables dans une page Web ainsi que leurs 
interactions possibles. 

L'utilisation conjointe des langages HTML (ou xHTML), CSS et JavaScript offre la 
possibilite de rendre une page Web plus interactive, modifiable par elle-meme au cours 
du temps et plus riche graphiquement. 

Les sections qui suivent detaillent la maniere de mettre en oeuvre les langages HTML et 
CSS ainsi que la facon dont JavaScript peut les manipuler et interagir avec eux. 
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Figure 8.1 

Langages constituant une page Web 



HTML et xHTML 

Les langages HTML et xHTML permettent de definir la structure d'une page Web sous la 
forme d'un squelette, lequel permet au navigateur d'initialiser sa representation en memoire 
de la page. 

Ces langages se fondent sur les technologies de balisage, notamment XML, bien que le 
HTML ne supporte pas la totalite des concepts de ce langage. 



XML (extensible Markup Language) 

XML est un langage servant de fondement aux langages de balisage. Cela en fait un metalangage, qui 
standardise la maniere d'utiliser des balises afin de definir des documents. Les langages fondes sur XML 
sont appeles grammaires XML. 



Le HTML 

Le langage HTML (HyperText Markup Language) est utilise afin de mettre en oeuvre des 
pages Web contenant des liens et des elements graphiques. Ces pages sont concues pour 
etre affichees dans des applications appelees par un navigateur Web. 

La premiere version de cette specification a ete publiee en juin 1993 en tant que docu- 
ment de travail par 1'IETF (Internet Engineering Task Force) et ne correspondait done pas 
veritablement a un standard. 
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IETF (Internet Engineering Task Force) 

LEFT est un groupe informel et ouvert a tous dont I'objectif est de definir les standards d'lnternet. II est 
constitue de differents groupes de travail, dont I'objectif est de rediger une ou plusieurs RFC (Request for 
Comments) correspondant aux diverses specifications de description des technologies de base d'lnternet. 
Des sites mettent a disposition le contenu des RFC de I'lETF, notamment les suivants : http://www.rfc.net/ 
et http://www.rfc-editor.org/. Ce groupe a notamment specifie les versions 1.0 et 1.1 du protocole HTTP 
avec les RFC 1945 et 2616. 



Ce n'est qu'avec sa version 2.0 que le langage HTML a ete veritablement normalise sous 
forme de RFC aupres de I'lETF par petits lots entre novembre 1995 et Janvier 1997. Ont 
suivi les versions 3.2 en Janvier 1997, 4.0 en decembre 1997 et 4.0.1 en decembre 1999. 
Le HTML n'a ete publie en tant que standard ISO/IEC qu'en mai 2000. 

Le HTML decrit la structure des pages ainsi que la facon d'utiliser les feuilles de style 
CSS et d'importer des scripts exterieurs. II definit en outre les differents types de balises 
permettant aussi bien de structurer une page que de mettre en oeuvre des elements graphi- 
ques et des liens hypertextes. 

Le code suivant decrit un exemple de page HTML : 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 

(...) 
</head> 
<body> 

<p>Un exemple de page HTML</p> 
</body> 
</html> 

Le tableau 8.1 recapitule les principaux groupes de balises definies par la specification HTML. 
Tableau 8.1 Principaux groupes de balises du HTML 



Groupe Description 

Conteneur Permet de definir des conteneurs generiques de balises, correspondant notamment aux balises di v et span. 

Formulaire Permet de definir des formulaires ainsi que leurs elements par I'intermediaire des balises form, input, text area 
et select. 

Hyperlien Permet de definir des hyperliens par I'intermediaire des balises a et map. 

Image Permet de specifier une image par le biais de la balise i nig. 

Liste Permet de definir des listes ainsi que leurs elements par I'intermediaire des balises ul , ol , et 1 i . 

Script Permet d'inserer des scripts dans une page HTMLou deleurfaire reference par I'intermediaire de la balise script. 

Structure Permet de definir la structure generique de la page, correspondant notamment aux balises html , head, title et 
de la page body. 

Style Permet d'inserer des styles dans une page HTML ou de leur faire reference par I'intermediaire respectivement des 

balises style et link. 
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Tableau 8.1 Principaux groupes de balises du HTML (suite) 

Groupe Description 

Tableau Permet de definir des tableaux ainsi que leurs cellules par I'intermediaire des balises table, thead, tbody, th, tr et td. 

Texte Permet de definir des elements texte ainsi que leurs proprietes par le biais de balises telles que p. Notons qu'il 

n'est pas recommande d'utiliser certaines balises de ce groupe et qu'il est preferable d'utiliser des CSS. 

Le HTML distingue deux grands types de balises, les elements en ligne et les elements de 
type bloc. Les premiers sont concus pour etre appliques au fil du texte arm de l'enrichir, 
par exemple, d'effets de renforcement (en gras dans les navigateurs) ou d'emphase (en 
italique dans les navigateurs). lis ne servent en aucun cas a creer de nouveaux blocs, a la 
difference des seconds. 

Ces derniers permettent de definir des elements dont le rendu visuel forme un bloc, comme 
les paragraphes ou les tifres. Ces elements ont la particularite d' avoir des proprietes relatives 
a leurs dimensions et d'offrir la possibilite de les positionner dans le document HTML en 
relatif ou en absolu. 

Les balises a, em, img et span sont des exemples de balises en ligne, tandis que les balises 
div, form, hi, h2 et table sont de type bloc. 

Le langage HTML definit aussi des balises semantiques de texte, qui peuvent etre utilisees 
arm de bien separer la structure de l'affichage de la page. Ainsi, les balises strong et em 
permettent de specifier des effets de renforcement et d'emphase pour des textes. Elles 
doivent etre preferees aux balises non semantiques correspondantes b et i , qui permettent 
respectivement de mettre du texte en gras ou en italique. 

Ces balises ont par defaut le meme comportement, lequel peut etre modifie, dans le cas 
des balises strong et em, en fonction du type d'affichage souhaite en se fondant sur le 
langage CSS. 

Certaines versions de la specification, tel le HTML 4.0. 1 Strict, vont dans ce sens et 
interdisent Tutilisation des balises decrivant un comportement graphique. 

Cette utilisation du langage HTML favorise l'accessibilite des pages Web sur Internet en 
se focalisant sur leur structure logique et non directement sur leur aspect. 

Le code suivant donne un exemple de mise en ceuvre de quelques-unes des balises 
recapitulees au tableau 8.1 : 

<html> 
<head> 

<title>Le titre de ma page</title> 
<script type="text/javascript"> 

(...) 
</script> 
<style type="text/style"> 

(...) 
</style> 
</head> 
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<body> 

<!-- Definition d'un tableau --> 
<table> 
<thead> 
<tr> 

<td>Entete K/td> 
<td>Entete 2</td> 
</tr> 
</thead> 
<tbody> 
<tr> 

<td>Colonne K/td> 
<td>Colonne 2</td> 
</tr> 
</tbody> 
</table> 

<!-- Definition d'un formulaire --> 
<form name="monFormulaire" 

action="/soumissionFormulai re.php" 
method="POST"> 
<input type="hidden" name="champl" val ue="valeurl"/> 
<input type="text" name="champ2" value="valeur2"/> 
</form> 

<!-- Definition d'une image --> 
<img src="/images/monImage.png" border="0"/> 
</body> 
</html> 

Notons que les balises HTML acceptent divers attributs permettant de leur specifier 
differents parametres. 

Le xHTML 

Le langage xHTML se positionne en tant que successeur du HTML. II correspond en 
realite a un langage distinct, qui reformule le HTML 4.0.1 en se fondant sur la version 1.0 
de XML. De ce fait, les pages Web utilisant le xHTML doivent etre bien formees au sens 
XML. Toutes les balises doivent etre correctement fermees et les attributs delimites par le 
caractere " ou 

Publiee en Janvier 2000, la version 1.0 du xHTML a ete suivie par la 1.1 en mars 2001. 
La version 2.0 est en cours de specification aupres du W3C. Elle offrira les memes fonc- 
tionnalites que les versions 4.0 et 4.0. 1 du HTML reformulees en XML. 

Le xHTML 1.1 divise le langage en modules correspondant a differentes fonctionnalites. 
Lobjectif est de permettre a divers types de materiels de ne prendre en charge que certaines 
parties de la technologie. 

Ce decoupage s'accompagne de l'abandon des fonctionnalites du HTML 4 susceptibles 
d'etre prises en charge par des feuilles de style. L'objectif est d'accentuer la separation 
entre la description de la structure des pages et leur representation graphique. La mise en 
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oeuvre de cet aspect favorise la prise en compte de differents terminaux pour l'affichage 
des pages Web. 



Validation de fichiers xHTML 

Le consortium W3C offre un outil en ligne permettant de valider les fichiers xHTML. Cet outil est disponible 
a I'adresse http://validator.w3.org/. 



II existe deux versions principales du langage xHTML, comme le recapitule le tableau 8.2. 
Tableau 8.2 Versions du langage xHTML 

Version Description 

Strict Cette version rigoureuse du langage interdit ('utilisation de balises obsoletes et dediees a la mise en forme 

dans les pages HTML. Elle impose en outre I'utilisation du langage CSS pour la presentation des pages. 

Transitional Cette version du langage est concue pour favoriser la transition vers la version stride et est done beaucoup 

plus permissive, autorisant notamment diverses balises obsoletes. 



Nous recommandons d'utiliser la version Strict du langage xHTML, car elle interdit 
I'utilisation de balises de mise en ceuvre et force les developpeurs a utiliser le langage CSS 
pour definir la presentation des pages. 

Le code suivant reprend l'exemple de la section precedente et l'adapte au langage xHTML 
en precisant la version du langage (reperes O) ainsi que la langue (repere ©) utilisees : 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<-© 

"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">*-© 
<html xmlns=" http://www.w3.org/1999/xhtml " 

xml :lang="f r" dir="ltr" lang="fr"><-© 
<head> 

(...) 
</head> 
<body> 

(...) 
</body> 
</html> 



CSS 



Le langage CCS (Cascading Style Sheets) adresse les problematiques d'afflchage des 
pages HTML. Son objectif est de permettre la separation claire entre la structure d'une 
page, par le biais du langage HTML, et sa presentation avec CSS. Fonde sur 1' application 
en cascade de styles sur les elements contenus dans les pages HTML, il permet d'appliquer 
des styles en fonction de la position des balises. 

Apparu en 1994 sous l'impulsion de Hakon Wium Lie et Bert Bos, CSS a ete normalise 
en decembre 1996 par le W3C sous la denomination CCS1. Publie en mai 1998, CSS2 
adresse les problemes non resolus par la version precedente. 
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Cette technologie rencontre encore de grandes difficultes a etre completement supportee 
par les differents navigateurs du marche. Ces derniers ont implements CSS 1 peu apres 2000, 
tout en commencant a integrer des specificites de CSS2. Bogues et implementations 
incompletes de CSS2 par les navigateurs entrainent de nombreuses difficultes pour rendre 
P aspect des pages HTML identique dans tous les navigateurs. 

En depit de ces limitations, cette technologie presente bien des atouts, notamment Padapta- 
tion de Paspect des pages HTML en fonction des caracteristiques du recepteur, Pamelio- 
ration de leur accessibilite, la plus grande facilite a les structurer et la reduction de leur 
complexite. 

Definition de styles 

Un style CSS correspond a un ensemble de proprietes auxquelles diverses valeurs doivent 
etre affectees. Ces proprietes varient suivant les balises auxquelles elles sont appliquees. 

Un style peut etre defini selon deux methodes, soit en utilisant un bloc de definition, soit 
en definissant un style pour une balise specifique. 

La premiere methode doit etre mise en oeuvre en priorite. Elle consiste a utiliser un bloc 
dedie de definition qui peut etre integre dans un fichier HTML par le biais de la balise styl e 
ou externalise dans un fichier auquel le fichier HTML fera reference par Pintermediaire 
de la balise link. 

Le code suivant montre comment definir un styles CSS dans une balise styl e (repere O) 
et par Pintermediaire d'un fichier independant (repere ©) : 

<html> 
<head> 

<style type="text/css"><-0 

</style> 

< 1 ink rel="stylesheet" type="text/css" 

href="mes_sty les. ess "/><-© 
</head> 
</html> 

En cas d'utilisation des balises styl e ou 1 i nk, il est recommande de definir ces dernieres 
dans Pen-tete des fichiers HTML. 

Lors de sa definition, un style doit specifier un selecteur afin de decrire sur quel ensemble 
de balises il s'applique. 

La definition d'un style est structuree de la maniere suivante : 

selecteur { 

clel : valeurl; 
cle2 : valeurZ; 
(...) 
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Le code suivant fournit un exemple de mise en oeuvre de cette approche : 

div { 

background: yellow; 
font-family: cursive; 
width: lOem; 
} 



Validation de styles 

Le consortium W3C offre un outil en ligne afin de valider les styles definis dans un fichier independant ou 
une page HTML. Cet outil est disponible a I'adresse http://jigsaw.w3.org/css-validator/. 



La seconde methode consiste a definir un style pour une balise specifique par l'inter- 
mediaire de son attribut styl e. Dans ce cas, elle lui est specifique, et aucun selecteur n'est 
precise. 

Le code suivant illustre la mise en oeuvre de cette approche afin d'appliquer des proprie- 
tes CSS a une balise div (repere O) : 

<html> 
(...) 
<body> 
(...) 
<div style="background: yellow; font-family: cursive; width: 10em"><-© 

(...) 
</div> 
(...) 
</body> 
</html> 

L utilisation de cette methode presente toutefois 1' inconvenient de melanger les respon- 
sabilites de structuration et de rendu des pages HTML. 

Nous ne detaillons pas dans cet ouvrage les differentes proprietes CSS permettant d'appliquer 
des proprietes graphiques. Afin d'aller plus loin, nous recommandons la lecture de 
l'ouvrage CSS 2. Pratique du design Web, paru chez Eyrolles. 



Application des styles 

Lors de l'utilisation de la premiere methode introduite a la section precedente, le selecteur 
permet de relier les styles definis a des balises HTML. Ce selecteur peut prendre 
plusieurs formes et se fonder sur plusieurs elements des balises afin de realiser cette liaison. 

La liaison la plus simple consiste a se fonder sur le nom des balises. Ainsi, le style s' applique 
aux balises dont le nom est specifie dans le selecteur, comme dans le code suivant : 

/* S'applique a toutes les balises div */ 
div { 

background: yellow; 

font-family: cursive; 

width: lOem; 
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/* S'applique a toutes les balises p */ 

P ( 

background: gray; 

} 

II est egalement possible d'utiliser l'identifiant unique specifie pour une balise par l'inter- 
mediaire de son attribut id. 

Le code suivant montre comment specifier un style (repere O) pour la balise d'identifiant 

monldentifiant (repere ©) : 

<html> 
<head> 

<style type="text/css"> 

/* S'applique a la balise monldentifiant */ 
//monldentifiant {<-0 

background: yellow; 
font-family: cursive; 
width: lOem; 
) 
</style> 
</head> 
<body> 
(...) 
<div id="monIdentifiant"><-© 

(...) 
</div> 
(...) 
</body> 
</html> 

II est enfin possible de se fonder sur la notion de classe pour decoupler les styles des 
balises. La classe est ensuite specifiee au niveau des balises par l'intermediaire de leur 
attribut class. 



Regroupement de styles 


La technologie CSS offre la possibility de regrouper plusieurs styles en un seul en se fondant sur le caractere 


virgule (,), comme dans le code suivant : 


/* S'applique a toutes les balises div et span */ 


div, span { 


background: yellow; 


font-family: cursive; 


width: lOem; 
} 



Le code suivant indique comment specifier un style (repere O) pour les balises de classe 
ma Classe (reperes ©) : 
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<html> 
<head> 

<style type="text/css"> 

/* S'applique aux balises de classe maClasse */ 
.maClasse {<-0 

background: yellow; 
font-family: cursive; 
width: lOem; 
} 
</style> 
</head> 
<body> 
(...) 

<div class="maClasse">( . . . )</div><— © 
(...) 

<div> (...)</div> 
(...) 

<div class="maClasse">( . . . )</div><— © 
(...) 
</body> 
</htm1> 

La selection d'un type de balises possedant une classe particuliere (reperes ©) par un 
style (repere O) peut etre facilement mise en oeuvre, comme le montre le code suivant : 

<html> 
<head> 

<style type="text/css"> 

/* S'applique aux balises div de classe maClasse */ 
div. maClasse {<-© 

background: yellow; 
font-family: cursive; 
width: lOem; 
} 
</style> 
</head> 
<body> 
(...) 

<div class="maClasse">( . . . )</div><— © 
(...) 

<div> (...)</div> 
(...) 

<div class="maClasse">( . . . )</div><— © 
(...) 
</body> 
</html> 

Un des grands atouts de CSS est qu'il permet d'utiliser des selecteurs prenant en compte 
l'arborescence des pages HTML. Des styles peuvent de la sorte etre appliques en fonction 
de la position d'une balise dans la structure du document. Cela peut consister en une sous- 
balise d'une balise d'un type ou d'un nom donne. 
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Le code suivant permet d'appliquer un style (repere O) a la sous-balise de type a (repere ©) 
de la balise de type di v : 

<html> 
<head> 

<style type="text/css"> 

/* S'applique a la balise a sous la balise 

d'identifiant monldentifant */ 
div a {<-© 

background: yellow; 
font-family: cursive; 
width: lOem; 
) 
</style> 
</head> 
<body> 
(...) 
<div> 

<a href="">Un lien</a><-@ 
</div> 
(...) 
</body> 
</html> 

La meme approche (les reperes sont les memes que precedemment) peut etre mise en oeuvre 
en se fondant sur les identifiants, comme dans le code suivant : 

<html> 
<head> 

<style type="text/css"> 

/* S'applique a la balise a sous la balise 

d'identifiant monldentifant */ 
#monIdentifiant a {<-© 

background: yellow; 
font-family: cursive; 
width: lOem; 
) 
</style> 
</head> 
<body> 
(...) 
<div id="monIdentifiant"> 

<a href="">Un lien</a><-© 
</div> 
(...) 
</body> 
</html> 

Ces approches sont particulierement interessantes en ce qu'elles permettent de traiter un 
bloc HTML sans avoir a definir d' informations utilisables par la technologie CSS. Seul 
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1' element racine du bloc doit specifier les informations sur lesquelles se fonde le selec- 
teur CSS. 



Interactions avec JavaScript 

Comme nous l'avons vu a la figure 8.1, JavaScript offre la possibilite d'interagir avec la 
structure DOM en memoire d'une page HTML. Cette structure peut ainsi etre modifiee 
afin d'ajouter, de modifier ou de supprimer des noeuds et des attributs de noeuds. 

De plus, comme l'application des styles CSS se fonde sur des attributs de noeuds, JavaScript 
peut agir par ce biais sur les aspects graphiques de la page. 

Avant toute chose, il est important de comprendre comment JavaScript a connaissance du 
navigateur Web dans lequel il s'execute. 

Detection du navigateur 

La detection du navigateur peut etre mise en ceuvre afin de gerer ses specificites. Cette 
detection est particulierement utile pour mettre en oeuvre des contournements specifiques 
a certains navigateurs lors de 1' implementation de bibliotheques JavaScript. 

Cette fonctionnalite peut etre realisee en se fondant sur l'attribut userAgent de l'objet 
JavaScript navigator, dont quelques valeurs sont recapitulees au tableau 8.3. 

Tableau 8.3 Quelques valeurs de l'attribut userAgent 
de l'objet navigator 



Valeur 


Systeme d'exploitation 


Navigateur 


Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1 .8.0.7) 
Gecko/20060909 Firefox/1 .5.0.7 


Windows XP 


Firefox version 1 .5.0.7 


Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; 
.NET CLR 1.1.4322) 


Windows XP 


Internet Explorer 6.0 


Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1 .8.0.7) Gecko/ 
20060909 Firefox/1 .5.0.7 


Linux Debian 


Firefox version 1 .5.0.7 


Mozilla/5.0 (compatible; Konqueror/3.5; Linux 2.6.15- 
1 .2054_FC5; X1 1 ; i686; enJJS) KHTML/3.5.4 (like Gecko) 


Linux Fedora 


Konqueror 3.5 


Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; 
rv:1. 8.0.6) Gecko/20060728 Firefox/1 .5.0.6 


MacOS X Intel 


Firefox version 1 .5.0.6 


Mozilla/4.0 (compatible; MSIE 5.23; Mac_PowerPC) 


MacOS X 


Internet Explorer 5.2.3 



Nous ne detaillons pas dans cet ouvrage la mise en oeuvre d'une fonction permettant de 
detecter le navigateur en se fondant sur le contenu de l'attribut userAgent. Pour plus 
d' informations, le lecteur peut se reporter a l'adresse http://en.wikipedia.org/wiki/User_agent, 
qui fournit la liste complete des valeurs de l'attribut userAgent en fonction du systeme 
d'exploitation et du navigateur. 
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Les expressions regulieres, concept aborde au chapitre 2, peuvent etre utilisees afin de 
detecter le navigateur en se fondant sur cet attribut. 

Une detection peut egalement etre mise en oeuvre en se fondant sur la verification de 
P existence d'attributs ou de methodes, approche permettant de detecter que le navigateur 
courant supporte ou non le mecanisme. 

Le code suivant donne un exemple de mise en oeuvre de cette approche tiree de la biblio- 
theque dojo : 

dojo.dom.innerXML = function(node){ 
i f( node. innerXML ){<-€> 

return node.innerXML; 
}else if (node.xml ) { <-© 

return node.xml ; 
}else ifttypeof XMLSerializer != "undefined" ){ <-© 

return (new XMLSerial izer( )) .serial izeToString(node) ; 



Ce code met en oeuvre la fonctionnalite innerXML, qui donne acces au contenu d'une 
balise au format XML quel que soit le navigateur. Le repere O verifie Pexistence de 
Pattribut 1 nnerXML pour un noeud et retourne la valeur de cet attribut. Si Pattribut n'est pas 
supporte, la fonction tente de se fonder de maniere similaire sur Pattribut xml du noeud 
(repere ©). Dans le cas contraire, elle tente d'utiliser la classe XMLSeri al i zer si elle existe 
afin de convertir le noeud en XML (repere ©). 

Manipulation de I'arbre DOM 

La manipulation de Parbre DOM de la page se realise en se fondant sur les fonctionnali- 
tes offertes par la technologie DOM (voir le chapitre 4). 

Ces fonctionnalites permettent notamment d' avoir acces a un ou un ensemble de noeuds 
en se fondant sur Pobjet document de la page et de manipuler ses differents noeuds (ajout, 
modification et suppression d'attributs) ainsi que la structure de Parbre DOM (ajout et 
suppression de noeuds). 

Les traitements de manipulation de Parbre DOM doivent etre realises une fois que celui- 
ci a ete charge. Les traitements de ce type localises dans la balise head se fondent alors sur 
Pevenement 1 oad de la page Web. 

Le code suivant montre comment mettre en oeuvre ce principe en se fondant sur la fonc- 
tion initialiser (repere O) appelee une fois que Parbre DOM de la page a ete initialise 
(repere ©) : 

<html> 
<head> 

<script type="text/javascript"> 
function initial iser( ) {<-© 

var monDiv = document .getElementByldC'monDiv") ; 
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/* La variable monDiv est bien renseigne avec le 

noeud d'identifiant monDiv */ 
(...) 
} 
</script> 
</head> 
<body onload=" initial iser( ) ; "><-© 

<div id="monDiv">( . . . )</div> 
</body> 
</html> 

Notons que l'appel direct de la fonction 1 ni ti al i ser a la fin du bloc delimite par la balise 
script et localise dans l'en-tete de la page (balise head) genere une erreur, car la balise 
d'identifiant monDiv n'est pas encore initialisee. 



Gestion des evenements 

Le langage JavaScript offre la possibility d'avertir de la survenue d'evenements sur la 
structure DOM d'une page Web. Ces evenements peuvent aussi bien correspondre a des 
actions des utilisateurs qu'a des modifications de cette structure. 

Fonctionnement 

Afin de mieux comprendre la gestion des evenements, il est important de connaitre leur 
flot de prise en compte au sein d'une page Web, qui est generalement composee de balises 
agencees de facon hierarchique. 

Le declenchement d'un evenement sur un element se repercute de proche en proche tout 
au long de la chaine de ses ancetres ou descendants. 

Comme indique au tableau 8.4, il existe deux modes de propagation des evenements. 

Tableau 8.4 Modes de propagation des evenements 

Mode Description 

Ascendant L'evenement se propage de I'element de plus bas niveau vers celui de plus haut niveau. Appele bubbling, ce 

mode a ete originellement mis en oeuvre par le navigateur Internet Explorer. 

Descendant L'evenement se propage de I'element de plus haut niveau vers celui de plus bas niveau. Appele capturing, 

ce mode a ete originellement mis en ceuvre par le navigateur Netscape. 



Le consortium W3C a standardise ce mecanisme en introduisant une propagation dans 
les deux sens. Comme l'illustre la figure 8.2, les evenements sont declenches tout d'abord 
en descendant dans l'arborescence puis en remontant. 

Notons que la phase de propagation ascendante est couramment utilisee afin de traiter les 
evenements. 

Les evenements peuvent etre associes a des balises HTML en se fondant sur certains de leurs 
attributs. Le nom de ces attributs est prefixe par on et suivi par le nom de l'evenement. 
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Arborescence des 
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Fin de traitement de 
I'evenement 
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propagation 

descendante 

(capturing phase) 



Figure 8.2 

Mecanismes de propagation des evenements 



Phase de 

propagation 

ascendante 

(bubbling phase) 




Leur valeur permet de specifier les traitements JavaScript a realiser lorsque I'evenement 
survient. 

Le code suivant donne un exemple de mise en oeuvre de ce mecanisme en se fondant sur 
les evenements 1 oad de la page (reperes O) et click d'un bouton (reperes ©) : 

<html> 
<head> 

<script type="text/javascript"> 

function traitementlntial isationPaget ) {<-© 

(...) 
} 
function traitementClicBouton( ) {<-© 

(...) 
) 
</script> 
</head> 

<body on 1 oad= "traitement I ntial i sat ion Paget ) ; "><-0 
(...) 
<input type="button" value="Cl iquer sur le bouton" 

oncl ick="traitementCl icBouton( );"/><-© 
(...) 
</body> 
</html> 
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La fonction traitementlnitialisationPage est appelee lorsque la page Web est chargee et 
lafonction traitementClicBouton en cas de clic sur le bouton. 

Notons que cette technique pose le probleme du melange des codes relatifs aux langages 
de balise HTML ou xHTML et au langage de script JavaScript. Cet aspect nuit a la 
comprehension et a la maintenabilite des pages Web. 

Heureusement, il existe une autre solution pour associer des observateurs d'evenements 
a des balises HTML sans passer par les attributs de ces dernieres. Cette solution utilise la 
technologie DOM, sauf pour le navigateur Internet Explorer, qui propose une approche 
specifique. 



Support du DOM niveau 2 

La technologie DOM supporte divers evenements classifies en categories en fonction de 
leur nom. 

Le tableau 8.5 recapitule ces categories. 

Tableau 8.5 Categories d'evenements supportees par le DOM niveau 2 

Description 

Couvre I'ensemble des types d'evenements. 

Correspond aux evenements abort, bl ur, change, focus, error, 1 oad, reset, 
scroll, select, submit, unload, etc. 

Correspond aux evenements lies a I'interface utilisateur (DOMActi vate, DOMFo- 
cusln et DOMFocusOut), ainsi qu'aux evenements declenches par le clavier 
(keydown, keypress et keyup). Avec le niveau 3 du DOM, les evenements clavier 
sont geres dans le type KeyboardEvents. 

Correspond aux evenements declenches par la souris, tels que click, 
mousedown, mousemove, mouseout, mouseover et mouseup. 

Definit les evenements impactant la structure logique du modele. 



Categorie 


Type 


Evenement 


Events 


Evenement relatif 
au HTML 


HTMLEvents 


Evenement relatif 
a I'interface utilisateur 


Ul Events 


Evenement de la souris 


MouseEvents 


Evenement de mutation 


MutationEvents 



La technologie DOM met a disposition diverses methodes afin de gerer les evenements. 
Elles se fondent sur des observateurs pouvant etre enregistres et desenregistres pour divers 
evenements. 



Observateur d'evenements 

Un observateur d'evenements correspond a une fonction ou une methode d'un objet qui est appelee lors 
du declenchement d'un evenement pour un element d'une page HTML. A cet effet, il doit etre enregistre 
pour un evenement. Lorsque I'observateur n'est plus utilise, il doit etre desenregistre. 



Les methodes addEventListener et removeEventListener permettent de gerer l'enregistre- 
ment et le desenregistrement de ces observateurs. Elles s'appliquent sur un nceud DOM 
et prennent en parametres le nom de l'evenement, la fonction a appeler lorsque celui-ci 
survient et un drapeau definissant dans quelle phase de propagation l'evenement doit etre 
traite. La valeur true correspond a la phase descendante et f al se a la phase ascendante. 
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Le code suivant illustre la mise en oeuvre de ces deux methodes (reperes © et ©) afin 
d'enregistrer et de desenregistrer une fonction (repere O) en tant qu'observateur : 

// Definition de 1 'observateur 

function traitementEvenement(evenement) {<-0 

(...) 
} 

var monNoeud = document. getElementByldC'monNoeud") ; 
// Enregistrement d'un observateur 

monNoeud. addEvent Li stenerC'cl ick" , traitementEvenement, false);*-® 
(...) 

// Desenregistrement de 1 'observateur 
monNoeud. remove Event Li stener( "click", traitementEvenement, false) ;<-© 

Le DOM fournit l'evenement declencheur en parametre lors de l'appel de la fonction de 
l'observateur (repere O). Cette instance correspond a une instance de la classe Event, 
dont les attributs et methodes sont respectivement recapitules aux tableaux 8.6 et 8.7. 

Tableau 8.6 Attributs de la classe Event 



Attribut 


Type 


bubbles 


Booleen 


cancel able 


Booleen 


currentTarget 


EventTarget 


eventPhase 


Nombre entier 


target 


EventTarget 


timeStamp 


Nombre entier 


type 


Chaine de caracteres 



Description 

Indique si l'evenement est en phase de propagation ascendante. 

Indique si l'evenement peut etre annule. 

Correspond au nceud auquel est affecte le gestionnaire d'evenement. 

Correspond a un numerique indiquant la phase durant laquelle l'evenement 
a ete intercepte. Les valeurs possibles sont CAPTURING_PHASE (valeur 1), 
AT_TARGET (valeur 2) et BUBBLING_PHASE (valeur 3). 

Correspond au noeud a partir duquel a ete declenche l'evenement. 

Correspond a I'heure a laquelle l'evenement est survenu. 

Correspond au type de l'evenement. 



Notons que tous les attributs de la classe Event sont en lecture seule. 
Tableau 8.7 Methodes de la classe Event 



Methode 


Parametre 


Description 


initEvent 


Le type de l'evenement 
et deux drapeaux 


Permet d'initialiser un evenement declenche manuellement par la 
programmation. Les drapeaux en parametres permettent de spe- 
cifier respectivement si l'evenement peut etre remonte ou annule. 


preventDefaul t 


- 


Permet d'annuler l'evenement. Les traitements par defaut asso- 
cies a l'evenement ne sont pas realises. 


stopPropagation 


- 


Permet d'arreter la propagation de l'evenement au cours de la 
phase de capture ou de remontee. 



Le code suivant illustre la mise en oeuvre des principaux attributs et methodes de la classe 
Event dans une fonction de traitement d'un evenement : 
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II Definition de 1 'observateur 

function traitementEvenement(evenement) { 

// Affichage du type de 1'evenement 

alertC'Type: "+ evenement.type) ; 

// Annulation de 1'evenement 

evenement .prevent Default ( ) ; 
} 

La classe MouseEvent etend la classe Event precedente afin de lui ajouter des informations 
relatives a un evenement declenche par la souris. Le tableau 8.8 recapitule les attributs 
supplementaires de cette classe. 

Tableau 8.8 Attributs supplementaires de la classe MouseEvent 



Attribut 


Type 


Description 


altKey, Ctrl Key, 
metaKey, shiftKey 


ESooleens 


Indique respectivement si les touches Alt, Ctrl, Meta ou Shift ont ete pressees lors 
du declenchement de 1'evenement. 


button 


Nombre entier 


Correspond au bouton de la souris qui a declenche 1'evenement. 


cl ientX, cl ientY 


Nombres entiers 


Correspond aux coordonnees de la souris dans la zone affichee par le navigateur 
(fenetre ou cadre). 


relatedTarget 


Booleen 


Permet de stacker un autre element mis en ceuvre par 1'evenement. II est typique- 
ment renseigne lors des evenements de deplacement de la souris (mouseover, 
mouseenter et mouseout). 


screenX, screenY 


Nombres entiers 


Correspond aux coordonnees de la souris a I'ecran. 



Le code suivant donne un exemple d' utilisation de cette classe par des observateurs 
d'evenements declenches par la souris : 

// Definition de 1 'observateur 

fonction traitementEvenement(evenement) { 

// Affichage des coordonnees de 1'evenement 
alertC'Coordonnees du pointeur de la souris: " 

+evenement.cl ientX+" , "+evenement.cl ientY) ; 
alertC'Coordonnees de 1 'offset de la souris: " 

+evenement.screenX+" , "+evenement. screenY) ; 
} 

Support du navigateur Internet Explorer 

Le navigateur Internet Explorer n'implemente pas le niveau 2 de la technologie DOM et 
possede une facon specifique de gerer les evenements. Bien que les concepts soient similaires 
a ceux des autres navigateurs, la mise en ceuvre des observateurs differe. 

Ainsi, les methodes attachEvent et detachEvent permettent de gerer l'enregistrement et le 
desenregistrement d' observateurs d'evenements. Elles s'appliquent sur un nceud DOM 
et prennent en parametres le nom de 1'evenement et la fonction a appeler lorsque celui 
survient. 
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Noms des evenements 

Les noms des evenements passes en parametres des methodes attachEvent et detachEvent ne 
correspondent pas exactement a ceux utilises avec le DOM niveau 2. Internet Explorer impose de les 
prefixer par on. Ainsi, I'evenement onclick correspond dans ce navigateur a I'evenement click du 
DOM niveau 2. 



Ces deux methodes s'utilisent de la meme maniere que celles similaires de la section 
precedente, comme l'indique le code suivant : 

// Definition de 1 'observateur 
fonction traitementEvenement( ) {<-0 

var evenement = window. event; <-© 

(...) 
} 

var monNoeud = document. getElementByldC'monNoeud") ; 
// Enregistrement d'un observateur 

monNoeud. attachEvent( "oncl ick" , traitementEvenement) ; <-© 
(...) 

// Desenregistrement de 1 'observateur 
monNoeud. detachEvent( "oncl ick" , traitementEvenement) ; <-© 

Bien que 1' enregistrement et le desenregistrement (respectivement reperes © et 0) de 
l'observateur se realisent de maniere similaire qu'avec le DOM, la recuperation de I'evene- 
ment (repere ©) dans la fonction de traitement (repere O) est specifique au navigateur. 

En effet, I'evenement peut etre accede aussi bien par l'attribut event de l'objet window de 
la page HTML que par le parametre de la fonction de l'observateur s'il est specifie. 

De plus, la classe representant un evenement dans Internet Explorer ne possede pas les 
memes attributs et methodes qu'avec le DOM niveau 2. Cette classe contient des infor- 
mations relatives aussi bien a la gestion de I'evenement qu'au pointeur de la souris. 

Ainsi, l'attribut srcElement correspond a l'attribut target de la classe Event DOM. Les 
attributs pageX et pageY ne sont plus presents, mais les valeurs qu'auraient eu ces attributs 
peuvent etre simulees en se fondant sur les attributs clientX et clientY additionnes aux 
valeurs de scroll. 

Les attributs offsetX et offsetY sont ajoutes et correspondent aux coordonnees du pointeur 
de la souris relativement a l'element sur lequel I'evenement est declenche. 

Le code suivant donne un exemple d'utilisation de cette classe par des observateurs 
d' evenements declenches par la souris : 

// Definition de l'observateur 

fonction traitementEvenement(evenement) { 

// Affichage des coordonnees de I'evenement 
alert( "Coordonnees du pointeur de la souris: " 

+evenement . cl i entX+" , "+evenement . cl i entY ) ; 
alert( "Coordonnees de 1 'offset de la souris: " 

+evenement.offsetX+" , "+evenement. offsetY) ; 
} 
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Pour finir, les methodes preventDefault et stopPropagation ne sont pas supportees par la 
classe representant un evenement dans Internet Explorer. Les fonctionnalites de ces 
methodes peuvent neanmoins etre mises en oeuvre dans ce navigateur en se fondant sur 
les proprietes respectives returnValue et cancel Bubble. 

Le code suivant montre comment mettre en oeuvre ces mecanismes dans le navigateur 
Internet Explorer : 

// Definition de 1 'observateur 

fonction traitementEvenement(evenement) { 

// Arret de la propagation de l'evenement 

evenement .cancel Bubble = true; 

// Annulation de l'evenement 

evenement . returnValue - false; 
} 

Types d'evenements 

Parmi les differents types d'evenements utilisables dans les navigateurs, nous pouvons tout 
d'abord distinguer les evenements relatifs a l'interface graphique. Ces derniers permettent 
de detecter ses changements d'etat ainsi que ceux de ses composantes. 

Le tableau 8.9 recapitule ces divers types d'evenements. 

Tableau 8.9 Evenements relatifs a l'interface graphique 

Type Description 

contextmenu Se produit lorsque I'utilisateur tente d'ouvrir le menu contextuel de la page, 

focus , bl ur Se produisent respectivement lorsqu'un element gagne et perd le focus. 

1 oad Se produit lorsqu'une page Web a ete chargee completement. 

resize Se produit lorsque lafenetredu navigateur est redimensionnee. 

scrol 1 Se produit lorsque I'affichage d'une page Web est scrollee. 

unl oad Se produit lorsqu'une page Web est dechargee. 

Les evenements declenches par la souris peuvent reagir aussi bien a un deplacement de la 
souris qu'a l'utilisation de ses boutons. Le tableau 8.10 recapitule ces divers types 
d'evenements. 

Tableau 8.10 Evenements declenches par la souris 



Type Description 

click Se produit sur un die de la souris pour un element. 

dbl click Se produit sur un double die de la souris pour un element. 

mousedown, mouseup Se produit respectivement lorsqu'un bouton de la souris est enfonce et relache. 

mousemove Se produit lorsque le pointeur de la souris est deplace. 

mouseover, mouseout Se produit respectivement lorsque le pointeur de la souris entre et sort de la zone 
correspondent a un element. 
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Divers evenements peuvent se produire sur des elements de formulaires arm de detecter 
des modifications dans les valeurs des champs ainsi que sur le formulaire lui-meme lors 
de son envoi. 

Le tableau 8.11 recapitule ces divers types d'evenements. 

Tableau 8.1 1 Evenements declenches par les formulaires 

Type Description 

change Se produit lors d'un changement dans un element d'un formulaire. Cet evenement n'est la 

plupart du temps supporte que de maniere partielle par les navigateurs. 

reset Se produit lorsque I'utilisateur reinitialise un formulaire. 

sel ect Se produit lorsqu'un utilisateur selectionne du texte dans un boite de saisie. 

submit Se produit lorsqu'un utilisateur soumet un formulaire. 

Des evenements peuvent etre declenches par le clavier lorsque I'utilisateur presse et relache 
une ou plusieurs touches du clavier. 

Le tableau 8.12 recapitule ces divers types d'evenements. 

Tableau 8.12 Evenements declenches par le clavier 

Description 

Se produisent respectivement lorsqu'une touche du clavier est enfoncee et relachee. 

Se produit lorsqu'une touche du clavier est pressee. Cet evenement ne se produit pas pour 
toutes les touches, notamment pour les fleches et les touches Alt, Ctrl et Maj. 

Les divers types d'evenements declenches par le clavier s'enchainent dans l'ordre suivant : 

keydown, keypress et keyup. 

Ann d'avoir acces au code de la touche declenchant l'evenement, l'attribut keyCode peut etre 
utilise dans le cas des evenements. Ann d'avoir acces au caractere de la touche, la methode 
fromCharCode de la classe String peut etre utilisee. Avec Firefox, l'attribut charCode doit 
etre utilise lors du traitement de l'evenement keypress a la place de l'attribut keyCode. 

Le code suivant fournit un exemple de mise en oeuvre du traitement des evenements 
declenches par le clavier : 

<html> 
<head> 

<script type="text/javascript"> 

function traiterEvenementsClavier(evenement) { 
// Affichage des coordonnees de l'evenement 
alertC'Touche (keyCode): "+evenement. keyCode) ; 
alertC'Touche (charCode): "+evenement. charCode) ; 
} 
document. addEvent Listener ("keydown" , 

t ra iter Evenement sCl avier, false) ; 



Type 


keydown, 


keyup 


keypress 
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document. add Event Listener ("key press", 

traiterEvenementsCl avier, false) ; 
</script> 
</head> 
<body> 

(...) 
</body> 
</html> 

Notons que, quand les evenements keydown et keypress sont traites pour le meme element, 
l'evenement keyup n'est pas declenche. II Test par contre si aucun ou un seul des deux 
evenements est traite. 



Declenchement manuel des evenements 

JavaScript offre la possibility de simuler manuellement des evenements utilisateur par 
programmation. 

La technologie DOM niveau 2 permet de declencher des evenements de souris en se fondant 
sur les methodes createEvent, initMouseEvent et dispatchEvent. 

La premiere correspond a une methode de l'objet document de la page Web et prend en 
parametre le type de l'evenement souhaite. Elle permet de creer une instance de l'evenement 
a declencher. 

La seconde correspond a une methode de l'evenement cree qui permet d' initialiser ce 
dernier. Elle prend en parametres les differentes caracteristiques de l'evenement. 

Le tableau 8.13 recapitule les parametres de cette methode dans l'ordre ou ils apparaissent. 



Parametre 


Type 


typeArg 


Chaine de caracteres 


canBubbleArg 


Booleen 


cancel ableArg 


Booleen 


viewArg 


AbstractView 


detail Arg 


Nombre entier 


screenXArg 


Nombre entier 


screenYArg 


Nombre entier 


clientXArg 


Nombre entier 


clientYArg 


Nombre entier 


Ctrl KeyArg 


Booleen 


al tKeyArg 


Booleen 



Tableau 8.13 Parametres de la methode initMouseEvent 
de la classe MouseEvent 



Description 

Specifie le type de l'evenement. 

Specifie si l'evenement peut etre remonte. 

Specifie si l'evenement peut etre annule. 

Specifie la vue associee a l'evenement. Generalement, l'objet wi ndow est utilise 
pour ce parametre. 

Specifie le nombre de dies de souris pris en compte pour l'evenement. 

Correspond a la valeur screenX de l'evenement. 

Correspond a la valeur screenY de l'evenement. 

Correspond a la valeur cl i entX de l'evenement. 

Correspond a la valeur cl i entY de l'evenement. 

Specifie si la touche Ctrl est considered comme pressee. 

Specifie si la touche Alt est considered comme pressee. 
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Parametre 




Type 


shiftKeyArg 




Booleen 


metaKeyArg 




Booleen 


buttonArg 




Nombre entier 


relatedTarge 


tArg 


EventTarget 



Tableau 8.13 Parametres de la methode initMouseEvent 
de la classe MouseEvent (suite) 

Description 

Specifie si la touche Maj est consideree comme pressee. 
Specifie si la touche Meta est consideree comme pressee. 
Specifie le bouton de la souris qui est considere comme presse. 
Correspond a I'attribut relatedTarget de I'evenement. 



Seule la methode dispatchEvent declenche reellement I'evenement pour un noeud de 
l'arbre DOM d'une page Web. Elle prend en parametre I'evenement precedemment cree. 

Le code suivant donne un exemple de mise en oeuvre des methodes createEvent (repere O), 
initMouseEvent (repere ©) et dispatchEvent (repere ©) arm de simuler un clic sur une case 
a cocher (repere 0) : 

<html> 
<head> 

<script type="text/javaScript"> 
function simulerCl ic( ){ 

var elt = document. getElementByldC'coche") ; 
// Creation de I'evenement 

var evt = document. createEventC'MouseEvents" ); <-€> 
// Initialisation de I'evenement 
evt.initMouseEventC'cl ick" .true, true, window,*-© 
0,0, 0,0,0, false, false, 
false, false, 0,nul 1 ) ; 
// Declenchement de I'evenement 
el t. dispatch Event (evt) ; 4- © 
) 
</script> 
</head> 
<body> 
(...) 

<input type="checkbox" id="coche"/><-0 
(...) 
</body> 
</html> 

A l'instar des mecanismes decrits au cours des sections precedentes, cette fonctionnalite 
doit etre mise en oeuvre specifiquement avec le navigateur Internet Explorer. 

Elle se fonde dans ce navigateur sur les methodes createEventObject et f i reEvent. 

La premiere offre la possibilite de recuperer une instance vierge d'evenement. Cette 
derniere doit etre ensuite initialisee en utilisant directement ses differents attributs. 

La methode fi reEvent permet de preciser le type d'evenement a declencher en utilisant 
l'instance precedemment creee. 
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Le code suivant correspond a l'adaptation du code precedent avec les methodes create- 
EventObject (repere O) et f i reEvent (repere ©) afin de le faire fonctionner avec le navigateur 
Internet Explorer : 



<html> 
<head> 

<script type="text/javaScript"> 
function simulerCl ic( ) { 

var elt = document. getElementByldt "coche") ; 
// Creation de 1 'evenement 
var evt = document. createEventObject( ); <-© 
// Initialisation de 1 'evenement 
evt.screenX = 0; 
evt.screenY = 0; 
evt.clientX = 0; 
evt.clientY = 0; 
// Declenchement de 1 'evenement 
el t.fi reEvent ("oncl ick" , evt) ; <-© 
} 
</script> 
</head> 
<body> 
(...) 

<input type="checkbox" id="coche"/> 
(...) 
</body> 
</html> 



Manipulation des styles 

Comme indique precedemment, les elements de style sont rattaches a la structure de la 
page HTML par le biais d'elements tels que le nom de la balise ou les attributs id, class 

et style. 

En se fondant sur les facilites de manipulation du DOM, JavaScript offre la possibility de 
modifier divers elements relatifs aux styles CSS. 

Changement de la classe d'une balise 

En s'appuyant sur le support du DOM, le langage JavaScript offre la possibility de modi- 
fier la valeur de l'attribut cl ass d'une balise. Cette approche permet de modifier la classe 
associee a la balise et de modifier ainsi le style qui lui est applique. 

Le code suivant donne un exemple de cette technique en se fondant sur le DOM niveau 2 : 

function modifierClasse(identifiantNoeud, nomClasse) { 

var balise = document. getElementByld(identifiantNoeud) ; 

bal ise.setAttribute( "class" , nomClasse) ; 
} 
modifierCl asseC'monNoeud" , "maNouvel leCl asse") ; 
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Dans les navigateurs tels qu'Internet Explorer, qui ne supporte pas ce niveau, l'attribut 
className doit etre utilise sur l'objet representant la balise, comme dans l'exemple de 
code suivant : 

function modifierClasse(identifiantNoeud, nomClasse) ( 

var balise = document. getElementByld(identifiantNoeud) ; 
var chaineClasse = new String(nomClasse) ; 
if(typeof bal ise. className -» "string"){ 

bal ise. className = chaineClasse; 
}else if (node.setAttribute){ 

bal ise.setAttribute( "class" , nomClasse) ; 

bal ise. className = chaineClasse; 



modifierCl asseC'monNoeud" , "maNouvel leClasse" ) ; 



Modification de la ciasse CSS d'une balise dans Firefox 

Le navigateur Firefox permet de modifier la ciasse associee a une balise mais n'applique pas correcte- 
ment les proprietes CSS de la nouvelle ciasse. Afin de contourner ce probleme, rutilisation des styles defi- 
nis par 1'intermediaire de l'attribut sty! e des balises est recommandee. Nous detaillons cette technique a 
la prochaine section. 



Changement d'une propriete de style d'une balise 

Lorsque le style est defini pour une balise par 1'intermediaire de l'attribut style, le 
langage JavaScript offre la possibility d'acceder a sa valeur et eventuellement de la modi- 
fier par 1'intermediaire du support du DOM. 

II est alors possible d'offrir un traitement permettant de modifier uniquement une propriete 
du style, comme dans le code suivant, en se fondant sur l'attribut style (repere O) des 
nceuds de la page HTML : 

function modifierProprieteStyle( 

identifiantNoeud, nomPropriete, valeurPropriete) { 

var balise = document. getElementByld(identifiantNoeud) ; 

bal ise.stylefnomPropriete] = valeurPropriete; <-© 
} 
modifierProprieteStyleC'monNoeud" , "background", "red"); 

Certaines bibliotheques telles que dojo offrent des fonctions de manipulation des styles 
integrant la prise en compte des specificites des navigateurs. Le module de dojo relatif a 
cet aspect est detaille au chapitre 1 1 de cet ouvrage. 
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Concepts avarices 

Maintenant que nous avons decrit les differentes techniques permettant de faire interagir 
avec JavaScript le HTML et CSS, nous allons aborder diverses bonnes pratiques de mise 
en oeuvre ainsi que des concepts avances relatifs a l'utilisation des technologies XML et 
XSLT dans des pages HTML. 

Gestion des evenements 

Nous avons decrit precedemment la facon de gerer les evenements avec JavaScript. Une 
bonne pratique de mise en ceuvre de ce concept consiste a l'externaliser hors des balises 
HTML. Cette technique permet de minimiser le melange des langages HTML et JavaScript. 

A cet effet, une API generique d'enregistrement et de desenregistrement d'observateurs 
d'evenements doit etre mise en ceuvre afin de gerer les specificites des differents navigateurs. 

API generique 

Comme indique precedemment, les navigateurs ne permettent pas d'enregistrer et de 
desenregistrer des observateurs de maniere uniforme. La plupart des bibliotheques JavaScript 
fournissent des API generiques afin d'integrer et de masquer ces specificites. 

Le code suivant fournit un exemple d' implementation de ce principe : 

// Fonction generique d'enregistrement d'observateurs 
function enregistrerObservateur(element, evenement, 

fonction, capture) { 
capture = capture || false; 
if( element. addEventListener ) { 

element. addEventl_istener(evenement, fonction, capture); 
} else if( element. attachEvent ) { 

element. attach Even t( "on"+evenement, fonction) ; 
} 
} 

// Fonction generique de desenregistrement d'observateurs 
function desenregistrerObservateur(element, evenement, 

fonction, capture) { 
if( element. removeEventListener ) { 

element. removeEventl_istener(evenement, fonction, capture); 
} else if( element. detachEvent ) { 

element. detach Even t( "on"+evenement, fonction) ; 
} 
} 

L'utilisation des fonctions enregistrerObservateur (repere O) et desenregistrerObservateur 
(repere ©) se realise de la maniere suivante : 

// Definition de 1 'observateur 

fonction traitementEvenement(evenement) { 

(...) 
} 
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var monNoeud = document. getElementByldC'monNoeud") ; 

// Enregistrement d'un observateur 

en regis trerObservateur( monNoeud, "click", traitementEvenement) ; <-0 

(...) 

// Desenregistrement de 1 'observateur 

desenregistrerObservateur(monNoeud, "cl ick" , traitementEvenement) ; <-© 

Methodes d'objet en tant qu'observateurs 

Les differentes techniques que nous avons decrites precedemment permettent uniquement 
1' enregistrement et le desenregistrement de fonctions. Les methodes d'objets ne sont 
done pas supportees directement. 

Cette fonctionnalite peut toutefois etre facilement mise en oeuvre en se fondant sur les 
fonctions call et appl y de la classe Functi on de JavaScript. Une fonction doit alors englober 
la methode arm de l'executer dans le contexte de son objet associe. Cette fonction doit 
ensuite etre utilisee lors des enregistrements et desenregistrements. 

Le code suivant donne un exemple de mise en ceuvre de cette fonctionnalite par le biais 
des fonctions enregistrerObservateurObjet (repere ©) et desenregistrerObservateurObjet 
(repere ©) fondees sur la fonction call (repere O) et les fonctions enregi strerObservateur 
et desenregi strerObservateur decrites precedemment : 

function convertirMethode(objet, methode) { 
return functionCevenement) { 

return methode. cal 1 (objet , evenement II window. event) ; <-0 



function enregistrerObservateurObjet(element, evenement, 

objet, methode, capture) {<-© 
var fonction = convertirMethodetobjet, methode); 
enregistrerObservateur(element, evenement, fonction, capture); 
} 
function desenregistrerObservateurObjettelement, evenement, 

objet, methode, capture) {<-© 
var fonction = convertirMethodetobjet, methode); 
desenregistrerObservateur(element , evenement, fonction, capture); 



Utilisation des technologies XML et XSLT 

Le langage JavaScript offre la possibilite de mettre en oeuvre les technologies XML et XSLT 
au sein de pages Web. Lobjectif est de creer des documents XML vierges et de realiser 
des transformations de format sur des documents XML. 

Creation de documents XML 

Le support de la technologie XML au sein des navigateurs n'est pas uniformise, notamment 
quant a la creation de documents XML en memoire et a la conversion de texte en XML. 
II convient done de realiser diverses fonctions arm d'integrer ces specificites. 
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La fonction suivante permet de creer un document XML vierge dans les navigateurs Firefox 
(repere O) et Internet Explorer (repere ©) : 

function creerDocumentXMLO { 
if( document. implementation 

&& document .implementation. createDocument) {<-© 
var documentXML = 

document. implementation. createDocument ("" ,"" , nul 1 ) ; 
documentXML. async - false; 
return documentXML; 
} else if( window. ActiveXObject ) {<-© 

var documentXML = new ActiveXObject( "Microsoft. XMLDOM") ; 
documentXML. async = false; 
return documentXML; 
} 
1 

Notons, dans le code ci-dessus, l'utilisation de l'attribut async, qui permet d'indiquer que 
tout le document doit etre charge en memoire de maniere synchrone ou async hrone. Dans 
le second cas, un observateur sur l'evenement 1 oad doit etre enregistre afin de realiser les 
traitements sur le document une fois qu'il a ete charge. 



Composants ActiveX du navigateur Internet Explorer relatifs au DOM 

Differents composants ActiveX sont disponibles suivant la version du navigateur Internet Explorer utilise. 
Pour creer des documents XML, une bonne pratique consiste a detecter le composant ActiveX disponible 
le plus recent. 

La fonction suivante fournit un exemple de mise en oeuvre d'une fonction de ce type issue de la bibliothe- 
que dojo : 

function getActi veXImpl (activeXArray) { 

for (var i=0; 1 < activeXArray .length; 1++) { 
try { 

var testObj = new Acti veXObject(activeXArray[i ] ) ; 
if (testObj) { 

return acti veXArray[i ] ; 



} 
} catch (e) {} 



} 



} 



Les composants ActiveX relatifs au DOM sont les suivants (du plus recent au plus ancien) 
Msxml2.DOMDocument.5.0, Msxml2.DOMDocument.4.0, Msxml2.DOMDocument.3.0, 
MSXML2.DOMDocument, MSXML.DOMDocument, Microsoft.XMLDOM. 



Une fois le document de base cree, il est possible de l'initialiser par 1' intermediate d'un 
fichier XML en recourant a la methode load (repere O), comme dans le code suivant : 

kvar document = creerDocumentXMLO; 
document. 1 oad ("fichier.xml ") ; «-© 
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Dans le cas oil l'attribut async a ete positionne avec la valeur true avant le chargement du 
document, il est necessaire d'enregistrer un observateur sur le chargement de l'evenement 
(repere O). 

Le code suivant fournit un exemple de mise en oeuvre de ce principe dans Firefox : 

var document = creerDocumentXMU ) ; 

document. addEventListenerC'load" , functionO {<-© 

// Traitement des donnees du document XML 

(...) 
}, false); 
document. load( "fichier.xml ") ; 

Pour faire fonctionner ce code dans Internet Explorer, la methode addEventListener peut 
etre remplacee par la methode attachEvent, comme indique a la section relative a la mise 
en oeuvre des evenements. 

La creation de documents XML a partir d'une chaine de caracteres ne se realise pas de la 
meme maniere dans les navigateurs Firefox et Internet Explorer, comme le montre le 
code suivant : 

function parserChaine(chaineXML) { 

if( typeof DOMParser!="undefined" ) { 

var parser = new DOMParser( ) ; <-© 

return parser. parseFromStringtchaineXML, "text/xml"); 
) else { 

var document = creerDocumentXMU ) ; 

document. 1 oadXMU chai neXML ); <-© 

return document; 



var chaineXML 

= "<donnees><donnee id='l'>Valeur</donnee></donnees>" ; 
var document = parserChaine(chaineXML) ; 

Le premier traitement, utilisable dans Firefox, s'appuie sur un parseur DOM (repere O) 
tandis que le second, utilisable dans Internet Explorer, utilise la methode 1 oadXML (repere ©) 
du document XML precedemment decrit. 

Mise en oeuvre de la technologie XSLT 

JavaScript permet de mettre en oeuvre la technologie XSLT afin de transformer un docu- 
ment XML en s'appuyant sur une feuille de style XSL. 

A l'instar de XML, le support de la technologie XSLT n'est pas uniformise au sein des 
navigateurs, notamment pour la creation de l'entite de transformation et la transforma- 
tion elle-meme. 

La mise en oeuvre de XSLT s'appuie sur XML afin de creer les documents XML neces- 
saire s. 
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XSLT (extended Stylesheet Language Transformation) 

Decrit au sein de la recommandation XSL, XSLT correspond a un langage de transformation XML. II 
permet de realiser des transformations de n'importe quel document XML vers tout autre type de docu- 
ment. Le format obtenu est communement texte. La transformation est realisee dans un fichier XML, qui 
decrit comment utiliser le document XML en entree afin de produire le format en sortie. Ce fichier est 
passe en parametre a un moteur XSLT, qui realise la transformation. Des implementations existent pour 
differents langages, dont JavaScript. La specification est disponible a I'adresse http://www.w3.org/TR/xslt. 



Dans cette section, nous utilisons la feuille de style XSL feuille.xsl decrite dans le code 
suivant : 

<?xml version="1.0"?> 

<xsl :stylesheet xmlns :xsl="http://www.w.org/TR/WD-xsl "> 
<xsl:output method="xml "/> 
<xsl : tempi ate match="/"> 
<valeur><xsl :value-of 

select="/donnees/donnee[@id=' 1 ' ]"/></valeur> 
</xsl :template< 
</xsl :stylesheet> 

Cette feuille de style utilise un fichier XML fichier.xml de la forme : 

<donnees> 

<donnee id="l">Une valeur</donnee> 

<donnee id="2">Une autre valeur</donnee> 
</donnees> 

pour generer le format XML de sortie suivant : 

<valeur>Une valeur</valeur> 

Le navigateur Firefox se fonde sur le support de la technologie XML decrit a la section 
precedente et la classe XSLTProcessor. Comme le chargement des elements relatifs a la 
transformation a partir de fichiers est effectue de maniere asynchrone, la transformation 
doit etre realisee dans la fonction de rappel relative a leur chargement. 

Le code suivant fournit un exemple de mise en oeuvre de la technologie XSLT dans le 
navigateur Firefox : 

function parserChaine(chaineXML) { 

if( typeof DOMParser!="undef ined" ) { 
var parser = new DOMParserO; 

return parser. parseFromString(chaineXML, "text/xml ") ; 
} 
} 

var xsl tDocument = creerDocumentXMK ) ; 
var xsl tProcessor = null; 
xsl tProcessor ■ new XSLTProcessor( ) ; <-0 
xsl tDocument. loadtfichierXS LT) ; <-© 
/* Specification de la feuille de style a utiliser par 
le moteur XSLT */ 
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xsl t Processor. importStylesheet(xsl t Document) ; <-© 
// Chargement du document a transformer 
var documentXML = parserChaine( 

"<donnees><donnee id='l'>Valeur</donneeX/donnees>") ;<-© 
// Execution de la transformation 
var documentResultat = 

xsltProcessor.transformToDocument( document XML) ;<-© 

Ce code instancie (repere O) le moteur de transformation puis charge la feuille de style a 
utiliser (repere ©). Le moteur est alors configure avec la feuille precedente (repere ©) 
puis realise la transformation (repere ©) en recourant a un document XML charge prece- 
demment (repere 0). 

La fonction transformToFragment peut etre mise en ceuvre a la place de la fonction 
transformToDocument. Cette derniere prend un second parametre specifiant le noeud sous 
lequel le document resultant de la transformation doit etre ajoute. 

Si les elements relatifs a la transformation sont charges a partir de chaines de caracteres, 
aucune mise en oeuvre de fonctions de rappel n'est necessaire. 

Avec le navigateur Internet Explorer, divers controles ActiveX doivent etre utilises arm 
de mettre en oeuvre les transformations XSLT. Dans ce cas, les controles ActiveX presentes 
a la section relative a XML ne conviennent pas, puisqu'ils sont multithreades, et leurs 
correspondants non multithreades doivent etre utilises. 

Le code suivant adapte la fonction creerDocumentXML decrite precedemment afin de prendre 
en compte cet aspect dans le cas de la mise en ceuvre de XSLT (repere O) : 

function creerDocumentXMK ) { 
if( document. implementation 

&& document. implementation. createDocument) ( 
var documentXML = 

document. impl emen tat ion.createDocumentC" , "" , null ) ; 
documentXML. async = false; 
return documentXML; 
} else if( window. ActiveXObject ) { 

var documentXML = new ActiveXObjectt 

"MSXML2.FreeThreadedD0MDocument.3.0");<-© 
documentXML. async = false; 
return documentXML; 
) 
} 

Pour realiser la transformation, un moteur de transformation XSLT doit etre initialise a partir 
d'un composant ActiveX relatif a XSLT. Ce moteur est initialise avec un document XML 
contenant la feuille de style a utiliser, comme dans le code suivant : 

function creerXSLTProcessortf ichierXSLT) { 
// Chargement de la feuille de style XSLT 
var xsltDocument = creerDocumentXMLt ) ; 
xsl tDocument. async = false; 
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xsl tDocument.load(fichierXSLT) ; 

// Creation et initialisation du moteur de transformation 
var xslt = creerDocumentXsltt ) ; 
xsl t. stylesheet = xsl tDocument; 
return xsl t.createProcessor( ) ; 
} 

A partir de ce moteur, la transformation mise en ceuvre dans le code suivant peut etre 
realisee (repere ©) apres avoir specifie les documents XML en entree (repere O) et en 
sortie (repere ©) : 

function realiserTransformationtxsltProcessor, documentXML) { 
if( window. ActiveXObject ) { 

xsl tProcessor. input = documentXML; <-© 

var documentXMLTransforme - creerDocumentXMK ) ; 

documentXMLTransforme. async = false; 

xsl tProcessor. output = documentXMLTransforme;*-© 

xsl tProcessor. transform( ) ; <-© 

return documentXMLTransforme; 
} 
} 



Composants ActiveX du navigateur Internet Explorer relatifs a XSLT 

Differents composants ActiveX sont disponibles suivant la version du navigateur Internet Explorer utilise. 

Pour creer des documents XML ou charger des feuilles de style afin de realiser des transformations XSLT, 

une bonne pratique consiste a detecter le composant ActiveX disponible le plus recent. La fonction 

getActi veXImpl decrite precedemment peut a nouveau etre utilisee a cet effet. 

Les controles ActiveX non threades relatifs au DOM sont les suivants (du plus recent au plus ancien) : 

Msxml2.FreeThreadedDOMDocument.5.0, MSXML2.FreeThreadedDOMDocument.4.0, 

MSXML2.FreeThreadedDOMDocument.3.0. 

Les controles ActiveX permettant de charger des feuilles de styles XSL sont les suivants (du plus recent 

au plus ancien) : Msxml2.XSLTemplate.5.0, Msxml2.XSLTemplate.4.0, MSXML2.XSLTemplate.3.0. 



Dans une page HTML, la technologie XSLT peut etre mise en oeuvre afin de transformer 
des donnees XML recues par l'intermediaire d'une requete Ajax en un format que les 
fonctions JavaScript de la page savent traiter. 

La technologie peut egalement etre mise en oeuvre afin de modifier la structure de l'arbre 
DOM de la page et ainsi de modifier 1' aspect de cette derniere. 

Notons que des bibliotheques JavaScript telles que dojo integrant la prise en compte de 
ces specificites dans leurs supports du DOM et de XML. D'autres, telles que Sarissa ou xmljs, 
respectivement accessibles aux adresses http://sarissa.sourceforge.net et http://xmljs.sourceforge.net, 
sont dediees a la mise en oeuvre de XML et XSLT. 
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Conclusion 



Nous avons decrit dans ce chapitre les differents langages utilises dans une page Web 
ainsi que la maniere dont ils peuvent interagir entre eux. Nous avons ainsi introduit les 
mecanismes relatifs aux langages HTML et CSS. II convient d'etre particulierement 
attentif a bien separer la mise en ceuvre de ces langages. 

L'utilisation conjointe des langages HTML (ou xHTML), CSS et JavaScript offre la 
possibilite de rendre une page Web plus interactive, modifiable par elle-meme au cours 
du temps et plus riche graphiquement. Ce chapitre a pose les bases de ces mecanismes. 
Nous detaillons dans la suite de l'ouvrage leur mise en oeuvre au moyen de bibliotheques 
JavaScript. 

Tout en traitant de ces principes, nous avons decrit les bonnes pratiques de mise en ceuvre des 
evenements ainsi que la facon d'utiliser les technologies XML et XSLT dans des pages Web. 

Comme les traitements JavaScript deviennent de plus en plus complexes, notamment au 
niveau graphique, dans les pages Web, les scripts JavaScript doivent necessairement gagner 
en structuration arm de permettre leur maintenance et leur evolution. Le chapitre 9 decrit 
les techniques utilisables arm de structurer des composants graphiques avec JavaScript. 



9 



Mise en ceuvre 
de composants graphiques 



Apres avoir decrit les mecanismes de base des interfaces graphiques Web au chapitre 
precedent, nous abordons dans ce chapitre la maniere de structurer les elements graphiques 
des pages Web en nous fondant sur des composants graphiques. 

Nous definirons tout d'abord le role des composants graphiques et decrirons leur structure 
et la maniere de les concevoir. Differentes approches sont detaillees afin de les mettre en 
oeuvre dans des pages Web. 

Pour finir, nous fournirons plusieurs exemples concrets de mise en oeuvre de fonctionna- 
lites telles que les zones de texte et les listes de selection. 

Generalites sur les composants graphiques 

Les composants graphiques permettent d'elaborer les interfaces graphiques des applica- 
tions en fournissant des elements avec lesquels les utilisateurs peuvent interagir. Les 
composants graphiques peuvent egalement etre designes sous le terme de controles, puis- 
que ce sont eux qui ont la responsabilite de prendre en charge les actions des utilisateurs 
de 1' interface. 

Un composant graphique est defini par sa structure, qui permet de definir les differents 
elements graphiques qu'il met en oeuvre, son apparence, qui specifie les proprietes 
graphiques des elements definis dans sa structure, et ses comportements face aux actions 
des utilisateurs, comportements declenches en se fondant sur les evenements supported 
par le composant. 
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Le tableau 9.1 recapitule les composants graphiques les plus couramment rencontres 
dans les applications. 



Tableau 9.1 Composants graphiques couramment utilises 

Composant Description 
graphique 

Arbre Permet de mettre en ceuvre des arbres afin de definir des structures hierarchiques. 

Element Permet de mettre en ceuvre des formulaires tels que des boutons, des champs de saisie ou des 

de formulaire listes de selection. 

Fenetre Fenetre interne a la page Web apparaissant par-dessus les autres elements de la page et pou- 

vant etre de deux types : fenetre flottante pouvant etre deplacee dans la page et fenetre modale 
statique empechant I'acces au contenu sous la fenetre. 

Gestionnairede Permet d'organiser le positionnement des composants graphiques en se fondant sur des zones 
positionnement redimensionnables ou des onglets. 

Menu Menu contextuel ou non et barre d'outils 

Tableau Permet de mettre en ceuvre des tableaux complexes supportant des mecanismes de filtrage et 

de classement de donnees. 



La figure 9.1 illustre un ecran mettant en oeuvre les principaux composants graphiques 
decrits ci-dessus. Nous y retrouvons une fenetre interne a la page Web, fenetre contenant 
un gestionnaire de menus, un formulaire de saisie ainsi qu'un gestionnaire d'onglets et 
un arbre de selection. 
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Figure 9.1 

Exemples de composants graphiques dans une page Web 



Mise en ceuvre de composants graphiques 



Chapitre 9 

Cette figure illustre la possibility de mettre en ceuvre des composants graphiques evolues 
dans un environnement Web afin de realiser des interfaces Web riches. Les composants 
graphiques jouent un role essentiel dans la construction de ces interfaces, de meme que 
dans leur structuration et la prise en compte des specificites des navigateurs. 

Dans la suite de ce chapitre, nous decrivons les composants graphiques dans le contexte 
des applications Web. 

Objectifs des composants graphiques 

L'utilisation de composants graphiques simplifie 1' implementation des interfaces graphi- 
ques Web, les traitements qui leur sont associes etant modularises dans une entite logi- 
cielle fondee sur le langage JavaScript. 

Cette entite a egalement la responsabilite d'integrer les specificites des navigateurs aussi 
bien au niveau du langage JavaScript que du langage CSS. De ce fait, la mise en ceuvre 
des composants graphiques est identique dans tous les navigateurs. 

L'utilisation de composants graphiques permet egalement de produire une application 
homogene en terme d'ergonomie. Tous les elements graphiques sont presentes visuel- 
lement sous la meme forme et reagissent de la meme maniere aux actions des utili- 
sateurs. 

L'utilisation de composants graphiques fondes sur JavaScript permet ainsi de repondre a 
des besoins d'ergonomie elabores, tels que celui d'avoir des applications client leger 
proches des applications client lourd en terme d'ergonomie afin de faciliter leur utili- 
sation. 

Relations entre composants graphiques 

Pour utiliser de facon simple des composants graphiques ecrits en JavaScript, il est 
primordial de bien les organiser. 

A l'instar des balises HTML dans une page Web, les composants graphiques sont organi- 
ses de facon hierarchique. La figure 9.2 illustre une vue hierarchique de l'organisation 
des composants graphiques utilises a la figure 9.1. 

Nous pouvons distinguer deux types de composants graphiques : les composants corres- 
pondant a des conteneurs et pouvant contenir d'autres composants, tels les gestionnaires 
de menus et d'onglets de la figure 9.2, et les composants simples, qui ne peuvent pas en 
contenir d'autres, tels les boutons et zones de texte. 

Dans le cas des composants de type conteneur, les relations peuvent etre definies aussi 
bien en se fondant sur le langage HTML que sur des methodes des composants. 
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Organisation hierarchique des composants graphiques 



Arbre de selection 



Structuration des composants graphiques 

Pour structurer les composants graphiques, on utilise les mecanismes de JavaScript permet- 
tant de mettre en oeuvre la programmation orientee objet. 

II est de la sorte possible de gerer leur apparence ainsi que les traitements generiques a 
leur appliquer et la maniere de traiter leurs evenements. 
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Conception orientee objet 

Afin de rendre plus modulaire l'utilisation des composants graphiques, le recours aux 
mecanismes de la programmation orientee objet du langage JavaScript est essentiel. 

Chaque type de composant graphique est defini par sa propre classe, laquelle implemente 
tous les traitements propres au composant graphique par le biais de methodes. Certaines 
fonctionnalites, telles que la construction visuelle du controle, la gestion des evenements 
ou les methodes de controle, doivent etre implementees dans chaque composant. 

Le code suivant fournit un exemple de mise en oeuvre d'une classe d'un composant 
graphique : 

function MonComposant(noeud) { 

this.noeudComposant = noeud; 
} 
MonComposant. prototype. construire = functionO { 

var champ = document. createElementC'input") ; 

(...) 

this.noeudComposant.appendChildt champ) ; 
} 

L'utilisation du composant graphique dans une page Web peut se realiser de la maniere 
suivante : 

<html> 
<head> 

<script type="text/javaScript"> 
function initialiser (){ 

// creation d'un composant de type MonComposant 
var monDiv = document. getElementByldC'monDiv" ) ; 
var monComposant = new MonComposant(monDiv) ;<-0 
monComposant.contruire( ) ; 
) 
</script> 
</head> 

<body onload="initialiser( )"> 
<div id="monDiv"><-© 
</div> 
</body> 
</html> 

La classe MonComposant (repere O) est instanciee en utilisant en parametre la balise 
d'identifiant monDiv (repere ©), permettant ainsi de creer le composant dans cette balise. 

Nous verrons que plusieurs approches peuvent etre mises en oeuvre afin d'utiliser des 
composants graphiques dans une page Web. 

L'utilisation de classes JavaScript permet de beneficier de la notion d'heritage. Le 
comportement commun des composants JavaScript peut ainsi etre decrit dans une classe 
parente des controles graphiques. 

La figure 9.3 illustre l'organisation possible de quelques composants graphiques. 
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Figure 9.3 

Decoupage en objets des composants graphiques 

Dans l'exemple de cette figure, les composants graphiques sont repartis en deux families, 
les controles de type conteneur et les autres. Au final, tous les controles heritent de la 
classe Composant. Cette derniere prend en charge tous les traitements generiques. 

Afin de pouvoir s'inscrire dans un cadre d'utilisation normalise, les composants graphiques 
doivent implementer certaines regies decrites dans les sections suivantes. 



Apparence 



Le rendu visuel des composants graphiques doit pouvoir etre parametrable et modifiable 
afin de s'adapter aux preferences de chacun des utilisateurs. La technologie CSS doit etre 
mise en oeuvre au sein des composants afin d'adresser cette problematique. 

Pour rendre modifiables les elements de style d'un composant graphique, ce dernier peut 
se fonder sur une feuille de style contenant tous les styles qu'il utilise. Cette derniere est 
ajoutee dynamiquement par le composant a la page Web. 

Cette methode offre la possibility de bien separer le code JavaScript du composant de ses 
styles. 

Le code suivant donne un exemple de methode permettant a un composant d'ajouter une 
feuille de style a la page Web : 

function MonComposant(noeud) { 

this.noeudComposant = noeud; 

(...) 
} 
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MonComposant. prototype. a j outer FichierCSS = function(fichierCSS) 
if( IfichierCSS ) { 

return; 
} 

var feuillesStyles = document .stylesheets ; 
for(var i = 0; Kfeuil lesStyles. length; i++){<-© 

// verifie si la feuille de style n'existe pas deja 
if ( fichierCSS == feuil lesStyles[i ] .href .toString( )){ 
return; 



var link = document. createElementC'l ink") ; <-© 

1 ink. set Attribute ("type" , "text/ess") ; 

link.setAttributeC'rel " , "stylesheet") ; 

1 ink.setAttributeC'href " , fichierCSS) ; 

var head = doc.getElementsByTagNamet "head")[0] ; 

head. appendChild( link); <-© 



La methode ajouterFichierCSS (repere O) de la classe MonComposant verifie tout d'abord 
que le fichier CSS n'est pas deja specifie (repere ©) pour la page Web. Si tel n'est pas le 
cas, elle cree un nouvel element de type link (repere ©) puis l'ajoute a la page (repere ©). 

Ce traitement a pour effet de rendre les styles du fichier disponibles pour la page Web et 
done utilisables par le composant graphique. 

Comme indique dans le code suivant, le composant graphique peut par la suite specifier 
des proprietes relatives aux styles (repere O) definis dans la feuille de style CSS relative 
au composant : 

function MonComposant(noeud) { 

this.noeudComposant = noeud; 

(...) 
} 
MonComposant. prototype. construire = function(){ 

var conteneur = document. createElementC'di v" ) ; 

conteneur.className = "monComposantConteneur" ; <-© 

(...) 

this.noeudComposant.appendChildt conteneur) ; 
} 

Afin de simplifier 1' utilisation des feuilles de styles CSS pour les composants graphiques, 
il est souhaitable d'associer une feuille de style par composant graphique. Ce decoupage 
necessite de la rigueur dans le nommage des regies de style afin d'eviter tout conflit de 
nom. Une bonne pratique consiste a prefixer l'ensemble des regies par le nom du compo- 
sant graphique. 

La feuille de style associee au composant graphique de type liste de selection peut etre 
nommee, par exemple, 1 i steSel ecti on . ess et contenir les regies suivantes avec des noms 
prefixes par listeSelecti on : 
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.1 isteSelectionConteneur { 

position: relative; 

vertical -al ign: middle; 

z-index: 2; 
} 
.1 isteSelectionBordure { 

height: 50%; 

border-bottom: lpx solid ThreeDShadow; 

margin: Opx 2px; 

font-size: lpx; 
} 

De maniere similaire, la feuille de style pour un composant de type bouton peut etre 
nommee bouton .ess et contenir des regies dont les noms sont prefixes par bouton. 

Notons qu'il est toujours possible de specifier des proprietes de style pour les elements du 
composant graphique en se fondant sur les mecanismes decrits a la section « Manipulation 
des styles » du chapitre 8. 

Comportement generique 

Les comportements communs a tous les composants graphiques doivent etre implemen- 
ted par tout composant graphique. 

Affichage 

Chaque composant graphique comporte ainsi une representation graphique. Toute la logique 
de construction de sa representation est contenue dans une methode, laquelle utilise tous 
les mecanismes du DOM decrits au chapitre 4. 

Cette methode doit prendre au moins en parametre un noeud DOM ou son identifiant afin 
de pouvoir rattacher le composant dans la page Web. Differents parametres peuvent 
egalement etre utilises afin de configurer le composant aussi bien au niveau de ses donnees 
que de son apparence ou de ses traitements. 

Le code suivant fournit un exemple de mise en oeuvre d'une methode de construction 
(repere O) d'un composant graphique : 

function MonComposant(nceud, parametres) { 

this.noeudComposant = noeud; 

this. parametres = parametres; 
} 
MonComposant. prototype. construire - functionO {<-0 

var champ = document. createElementt "input") ; <-© 

var champCache - this.parametres["champCache"] ; 

if( champCache ) { 

champ. setAttribute( "type" , "hidden") ; <-© 
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var valeurParDefaut = this.parametres["defaut"] ; 
champ. set AttributeCval ue" , valeurParDefaut) ; <-© 
(...) 

this. noeudComposant. appendChildt champ) ; <-© 
} 

L' element graphique du composant, a savoir une zone de saisie sous forme de balise Input, 
est tout d'abord cree (repere ©) puis initialise (reperes ©) en se fondant sur les parametres 
du composant. 

Le composant graphique est finalement ajoute a la balise specifiee (repere 0) en se fondant 
sur l'attribut noeudComposant de la classe. 

Nous verrons par la suite que plusieurs approches peuvent etre mises en oeuvre afin d'appeler 
la methode de construction du composant graphique. 

Redimensionnent 

Pour s' adapter a la taille de la fenetre du navigateur, chaque composant graphique doit etre 
en mesure de modifier ses dimensions. Le dimensionnement doit etre une fonctionnalite 
disponible pour l'ensemble des composants graphiques. 

Dans l'exemple de diagramme de classes precedent, les methodes permettant la gestion du 
redimensionnent doivent etre implementees dans la classe Composant. Le dimensionnement 
des composants graphiques peut etre declenche par l'evenement onresi ze sur l'objet wi ndow. 

Le declenchement de l'evenement resize doit parcourir l'ensemble des composants 
graphiques presents dans la page et appeler la methode de dimensionnement de chacun 
d'eux. 

Le code suivant montre comment mettre en ceuvre cette approche dans une page Web : 

<html> 
<head> 

<script type="text/javascript"> 
var composants = [];<-0 
window. onresize = function(evenement) {<-© 
fortvar i=0;i<composants.length;i++) { 
var composant = composants[i ] ; 
composant. redimensionner(evenement) ; <-© 



function MonComposant(noeud) { 
this. noeudComposant = noeud; 



MonCompos an t . prototype . redi mens i onner 

= function(evenement) {<-© 
alertC'redimensionnement de MonComposant") ; 
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MonComposant. prototype. construire = functionO { 

var champ - document .createElement( "input") ; 

this.noeudComposant.appendChild(champ) ; 
} 

function initialiser^ ) { 

var monDiv = document. getElementByldC'monDi v") ; 
var monComposant - new MonComposant(monDiv) ; 
monComposant . construi re( ) ; 
composants. push (monComposant) ;<-0 
} 
</script> 
</head> 
<body onload=" initial iser( )"> 

<div id="monDiv"X/div> 
</body> 
</html> 

Un observateur est enregistre (repere ©) dans la page Web afin de gerer les evenements 
relatifs au redimensionnement de la fenetre du navigateur. Cet observateur permet de 
notifier tous les composants de la page de cet evenement en se fondant sur leur methode 

redimensionner (reperes ©). 

Tous les composants utilises dans la page Web doivent etre stockes dans le tableau nomme 
composants (reperes O) dans le code ci-dessus. 

Gestion des evenements 

Toute action realisee par un utilisateur sur un composant graphique se traduit par le declen- 
chement d'evenements. Ces evenements permettent de prendre en charge les traitements 
demandes par l'utilisateur. 

Comme indique precedemment, les composants graphiques sont mis en oeuvre sous 
forme de classes JavaScript, lesquelles ont la responsabilite de mettre en oeuvre leurs 
comportements. Ainsi, les evenements doivent etre relies a des methodes de leur classe 
afin que le declenchement d'un evenement entraine 1' execution d'une de leurs methodes. 

Nous avons decrit au chapitre 8 la maniere d'enregistrer des observateurs d'evenements en 
se fondant sur le langage JavaScript. En utilisant cette approche, les composants graphiques 
peuvent enregistrer eux-memes certaines de leurs methodes en tant qu'observateur 
d'evenements. 

Le code suivant donne un exemple d'enregistrement de la methode methodeObservation 
(repere O) en se fondant sur la fonction enregistrerObservateurObjet (repere©) du 
chapitre 8 : 

function MonComposant(noeud){ 

this.noeudComposant = noeud; 

(...) 
} 



Mise en ceuvre de composants graphiques 



Chapitre 9 



MonComposant. prototype. methodeObservation = function(evenement) {<-0 

(...) 
} 
MonComposant. prototype. initial iser = functionO ( 

(...) 

enregistrerObservateurObjettthis.noeudComposant, "click" ,<-© 

this, this .methodeObservation) ; 
} 



Utilisation d'Ajax 

Lutilisation d'Ajax dans 1' implementation des composants graphiques joue un role 
essentiel en permettant de bien separer la partie presentation de la partie gestion des 
donnees des composants graphiques. Dans la mesure ou ce principe permet d'afficher de 
nouvelles donnees sans avoir a recharger la page, les composants graphiques ont la possi- 
bility de gerer les donnees qu'ils manipulent de maniere autonome, sans avoir a recharger 
la page Web entierement. 

Arin d'integrer les techniques Ajax, les composants graphiques doivent disposer d'un 
module permettant de realiser des requetes Ajax. La fonction permettant de realiser une 
requete Ajax prend en parametre l'adresse de la requete, differents parametres ainsi 
qu'une fonction de rappel pour traiter la reponse, comme dans le code suivant : 

function executerRequeteAjax(adresse, 

parametres, fonctionDeRappel ) { 
(...) 



Ajax etant le plus souvent mis en oeuvre de maniere asynchrone, le resultat d'une requete 
de ce type ne peut etre accede dans la methode qui a realise la requete. Une methode de 
traitement des donnees de la reponse doit done etre mise en ceuvre dans la classe du 
composant graphique. 

Le code suivant fournit un exemple de mise en ceuvre de ce mecanisme dans un compo- 
sant graphique : 

function MonComposant(noeud) { 

this.noeudComposant = noeud; 
} 
MonComposant. prototype. traiterDonneesChargees( donnees) {<-© 



MonComposant. prototype. chargerDonnees( ) { 

var adresse - "http://local host/ajax/donnees . js" ; 

var parametres = { parametral: "valeurl" }; 

execute rRequeteAj ax (adresse, parametres, 

this.traiterDonneesChargees) ; <- 
} 
MonComposant. prototype. construire = functionO { 

(...) 
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La methode chargerDonnees se fonde sur la fonction executerRequeteAjax (repere O) afin de 
realiser une requete Ajax. L' utilisation de cette fonction permet de specifier la methode 
traiterDonneesChargees de la classe afin de traiter les reponses (repere ©) de la requete. 

Approches de construction 

La creation de compos ants graphiques dans une page Web peut se fonder sur le langage 
HTML pour definir les proprietes des composants graphiques et realiser leur construction 
ou n'utiliser que le langage JavaScript. Dans ce dernier cas, les composants sont crees et 
configures directement en se fondant sur ce langage. 

Parmi les bibliotheques JavaScript, rialto offre une approche fondee uniquement sur 
JavaScript tandis que dojo met a disposition les deux approches. 



Construction fondee sur le HTML 

Cette methode de construction de composants graphiques consiste a utiliser les balises 
HTML afin de leur specifier des proprietes particulieres. 

Les balises standards du langage sont utilisees conjointement avec des attributs specifi- 
ques pour les proprietes du composant. 

Cette approche necessite un parcours de l'arbre DOM de la page une fois que celle-ci a ete 
chargee. Ce parcours permet de traiter les attributs specifiques afin de creer et de parameter 
automatiquement les composants graphiques sans avoir a recourir au langage JavaScript. 

Nous avons vu au chapitre 4 comment modifier l'arbre DOM de la page juste apres son 
chargement. 

Dans l'exemple suivant, la construction d'un tableau consiste uniquement en la description 
de ce dernier : 

<html> 
<head> 

<script type="text/javaScript"> 
function initial iser( ) { 

// appel de 1 'analyse des objest DOM 
GestionCompos ant. anal yse( ) ; <-© 
} 
</script> 
</head> 
<body onload=" initial iser( )"><-© 

<div id="monTableau" typeComposant="tableau"><-© 
<titre libelle="Numero"/><-© 
<titre libelle="Isbn"/><-© 
<titre libelle="Titre'7><-0 
<titre libel le="Auteurs"/><-0 
</div> 
</body> 
</html> 
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Ann de construire le tableau, les traitements de l'arbre DOM sont declenches juste apres 
le chargement de la page Web en se fondant sur son evenement load (repere ©). Lorsque 
cet evenement se produit, les traitements d' analyse de l'arbre DOM sont realises (repere O). 

La balise div (repere©) est utilisee arm de definir un composant graphique de type 
tableau. Cet aspect est specifie par l'intermediaire de l'attribut typeComposant. 

Les colonnes du tableau sont derinies dans la balise div en se fondant sur les valeurs 
contenues dans les balises ti tre (reperes 0), balises mises en oeuvre specifiquement pour 
ce composant graphique et non interpreters par les navigateurs Web. 

Sans traitement JavaScript, les balises HTML ne seraient pas prises en compte par la 
page Web, et le tableau ne serait pas affiche. C'est pourquoi la methode analyse de l'objet 
GestionComposants doit etre mise en oeuvre des que la page est completement chargee. 

La methode analyse de l'objet GestionComposants prend en charge le parcours de l'arbre 
DOM dans sa globalite afin de detecter les noeuds possedant un attribut typeComposant. 
Ces noeuds sont alors utilises afin de creer les composants graphiques correspondants, 
comme l'indique le code suivant : 

var GestionComposants = {}; 
GestionComposants. analyse = function(){ 

var noeuds = document. getElementsByTagNameC'*") ; 
for (var i=0; Knoeuds. length; i++){ 
var noeud = noeuds. itemti ) ; 

var typeComposant = noeud .getAttribute( "typeComposant") ; 
if (typeComposant != null){ 
var composant = null; 
if (typeComposant == "tableau" ) {<-© 

/* construction du tableau par l'intermediaire 

d'une classe JavaScript */ 
composant = new Tableau(noeud) ; <-© 
) else if (typeCtrl == (...)){ 

// construction d'un composant d'un autre type 
(...) 
} 

// ajout des proprietes du composant 
composant. cons trui re() ; <-© 
// ajout de l'objet JavaScript au DOM 
noeud. composant = composant; <-© 



La methode analyse instancie les composants graphiques appropries (repere© pour 
l'instanciation de la classe Tableau) en fonction de la valeur de l'attribut typeComposant 
(repere ©). Tous les composants graphiques doivent posseder une structure commune, a 
savoir un constructeur possedant un parametre noeud et une methode construi re. 

Cette derniere est appelee (repere ©) afin de creer le composant graphique dans la page 
Web. 
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Pour finir, le traitement realise au repere permet de garder le lien entre 1' instance de 
l'objet JavaScript representant le composant graphique et les noeuds de l'arbre DOM. De 
cette maniere, il est a tout moment possible de recuperer l'instance JavaScript correspondant 
au composant, comme le montre le code suivant : 

Ivar nodeTableau = document. getElementByldC'monTableau") ; 
var monTableau = nodeTableau. composant; 

Le code suivant decrit la classe JavaScript Tabl eau utilisee afin de mettre en ceuvre un 
composant graphique de type tableau dans une page Web : 

function Tableau(noeud){ 

this.baseNoeud = noeud; 
} 
Tableau. prototype. construire = function()( 

// construction en DOM du tableau sur le noeud this.baseNoeud. 
var frag = document. createDocumentFragmentt ) ; 
var tableau = document. createElementC'table" ); <-© 
var thead = document .createElementC'thead") ; 
tabl eau. appendChild(thead) ; 
var tr = document. createElement( "tr" ) ; 
thead. appendChild(tr) ; 
f rag. appendChi 1 d( tabl eau) ; 
// construction des colonnes 

var colonnes = this.baseNoeud.getElementsByTagName( "titre") ;<-© 
for(var i=0; i<colonnes. length; i++){ 

var td = document. createEl ement( "td" ); <-© 

tr.appendChild(td) ; 

var titre = document .createElementt "1 abel ") 

var libelle = colonnes[i ] .getAttributeCl ibel 

var texte = document .createTextNoded ibel le) ; 

titre. appendChi ld(texte) ; 

td. appendChi IdCtit re) ; 



le"); 



this.baseNoeud. appendChi ld(f rag) ; 



) 



La construction du composant se realise par l'intermediaire de la methode createEl ement 
(repere O), qui cree la structure du tableau puis les differentes colonnes (repere ©) en se 
fondant sur l'attribut baseNoeud (repere ©). 



Construction fondee sur JavaScript 

Cette methode consiste a creer les composants graphiques en instanciant directement leur 
classe JavaScript. Au moment de l'instanciation de la classe JavaScript, l'ensemble des 
elements definissant les proprietes du composant doivent etre passes en parametre. 

Lidentifiant du noeud DOM auquel est ajoute le composant graphique doit egalement 
etre specifie. 
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Dans le code suivant, la classe Tabl eau de la section precedente a ete adaptee afin de mettre 
en oeuvre cette approche : 

function Tableau(idContainer) {<-© 

this.idContainer = idContainer; 

this.titreColonnes - new ArrayO; 

this.nbColonne = 0; 
} 

// ajout d'un titre de colonne 
Tableau. prototype. addColonne = function(titre){<-© 

this.titreColonnes[this.nbColonne] - titre; 

this.nbColonne++; 
} 

// construction du tableau 
Tableau. prototype. construi re = function(){ 

// construction en DOM du tableau sur le noeud this.baseNoeud. 

var frag = document. createDocumentFragment( ) ; 

var tableau - document. createElement( "table" ) ; 

var thead = document. createElementC'thead" ) ; 

tabl eau. appendChild(thead) ; 

var tr = document .createElementt "tr") ; 

tabl eau. appendChild(tr) ; 

f rag. appendChild( tabl eau) ; 

// construction des colonnes 

for(var i=0; i<this.titreColonnes .length; i++){<-© 

var td = document .createElementt "td") ; *-@ 

tr.appendChild(td); 

var titre = document. createElementC'l abel ") 

var libelle = this.titreColonnes[i ] ; 

var texte = document. createTextNodedibel le) ; 

titre.appendChild(texte) ; 

td . appendChi 1 d( titre) ; 
} 

thi s.idConteneur. appendChi ld( frag) ; 
} 

Le constructeur de la classe prend en parametre le noeud DOM (repere O) auquel est ajoute 
le composant graphique. La classe contient desormais une methode addColonne (repere ©), 
qui permet de specifier les libelles des colonnes du tableau. La methode construi re se fonde 
desormais sur l'attribut titreColonnes (repere©) afin de construire les colonnes 
(repere ©). 

La mise en oeuvre de la classe Tabl eau peut etre realisee juste apres le chargement de la 
page Web, comme le montre le code suivant : 

<html> 
<head> 

<script type="text/javaScript"> 
function initial iser( ){<-0 

// creation d'un objet tableau 
var monTableau - 

document. get Element By Id ("monTabl eau") ; 
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var tableau = new Tableau(monTableau) ; <-© 
tableau.addColonnet "nom" ) ; <-© 
tableau.addColonne( "prenom") ; <-© 
tableau.addColonnet "telephone") ; <-© 
tableau.construi ret ) ; <-© 
} 
</script> 
</head> 
<body onload=" initial iser( )"><-© 

<div id="monTableau"X/div> 
</body> 
</html> 

Le composant graphique est cree en utilisant la classe Tabl eau et ses methodes addCol onne 
et construire (reperes ©) a partir d'une fonction nominee initialiser (repere O), fonc- 
tion executee lorsque l'evenement 1 oad (repere ©) de la page Web survient. 

Bien que cette approche de construction paraisse au premier abord plus simple que la 
precedente, elle nuit a la lisibilite des traitements lorsqu'un nombre important de compo- 
sants graphiques est mis en oeuvre. 

En resume 

Les deux approches de construction des composants graphiques comportent chacune des 
avantages et des inconvenients. Leur utilisation depend de la maniere dont 1'interface 
Web est concue et des choix techniques. 

La methode par description HTML simplifie l'utilisation des composants graphiques en 
permettant de definir leurs proprietes par le biais d'attributs de balises HTML. Elle favo- 
rise ainsi l'homogeneisation des langages utilises dans la construction de 1'interface Web 
en masquant l'instanciation et la gestion des classes JavaScript correspondantes. 

Cette approche necessite cependant la definition de tous les composants utilises au char- 
gement de la page Web, meme si certains d'entre eux doivent etre masques dans un 
premier temps et ne sont utilises que par la suite. Elle est en outre couteuse en ressources 
puisqu'un parcours complet de l'arbre DOM de la page est necessaire arm de creer les 
composants graphiques definis. 

La methode de construction par instanciation des classes JavaScript des composants 
graphiques impose la connaissance de ces classes ainsi que l'utilisation de ce langage 
arm de creer 1'interface graphique. 

Elle offre neanmoins la possibilite de creer les composants a la volee au moment ou ces 
derniers doivent etre utilises. 

Exemples d'implementation de composants graphiques 

Cette section donne des exemples d'implementation de composants graphiques usuels 
mettant en oeuvre les concepts decrits dans ce chapitre. 

Nous utilisons notamment la fonction enregistrerObservateurObjet decrite au chapitre 8 
arm de permettre aux composants graphiques d'enregistrer des observateurs d'evenements. 
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Zone de texte et completion automatique 

Le composant graphique zone de texte est evidemment fondamental dans toute appli- 
cation Web puisqu'il offre la possibility a l'utilisateur de saisir des informations dans une 
zone. 

Le composant presente dans cette section permet d'ajouter une fonctionnalite supple - 
mentaire tres interessante a ce type de composant, a savoir la completion automatique 
lors de la saisie. 

Cette fonctionnalite permet de completer automatiquement la saisie dans une zone de 
texte lorsque le debut de la saisie correspond a une valeur unique. Ce cas d' utilisation 
convient parfaitement a la mise en oeuvre d'une aide a la saisie d'adresses e-mail conte- 
nues dans un carnet d'adresses. 

La valeur du champ de saisie est completee automatiquement des que les elements saisis 
permettent d' identifier une adresse e-mail unique. 

En reprenant l'approche de construction des composants graphiques fondee sur le 
langage HTML, le composant graphique peut etre defini par le biais de la balise HTML 
suivante : 

|<input type="text" typeComposant="completion" 
adresseCompletion="http: //local host/a jax/completi on "/><-© 

Lattribut adresseCompletion (repere©) permet de specifier l'adresse a utiliser afin de 
recuperer la valeur completee en se fondant sur une requete Ajax. 

Afin de prendre en compte ce nouveau composant graphique, la methode analyse de l'objet 
GestionComposants precedemment decrite doit etre amendee afin de gerer les composants 
graphiques de type completion (repere O), comme le detaille le code suivant : 

GestionComposants. analyse = function(){ 

var noeuds = document. getElementsByTagNameC'*") ; 
for (var i=0; Knoeuds. length; i++){ 
var noeud = noeuds. itemti ) ; 

var typeComposant = noeud .getAttribute( "typeComposant") ; 
if (typeComposant != null){ 
var composant = nul 1 ; 
if (typeComposant == "tableau")! 

composant ■ new Tableau(noeud) ; 
) else if (typeComposant == "completion" ){<-0 

composant = new Completion(noeud) ; 
} 

// ajout des proprietes du composant 
composant. cons trui ret ) ; 
// ajout de l'objet JavaScript au DOM 
noeud. composant = composant; 
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La mise en oeuvre du composant graphique se fonde sur la classe Compl eti on, dont le code 
est le suivant : 



functio 
thi 
thi 

} 

Compl et 
II 
thi 
II 

enr 

} 

Compl et 
var 
II 
thi 

} 

Compl et 



n Completion(noeud) { 
s.baseNoeud = noeud; 
s.adresseRecherche - null; 

ion. prototype. construi re = functiont ){ 

lecture de 1'url pour la completion 

s.adresseRecherche = this .baseNoeud.getAttributeC'adresseCompletion" ) ;<-© 

ajout de l'evenement keyup pour la completion 

egi s t re rObservateurOb jet (thi s.baseNoeud , 

"keyup", this, this .complete) ; <-© 



ion. prototype. complete = functiont ) {<-© 
texteSaisie = this. baseNoeud. value; 
envoie d'une requete Ajax avec le parametre texteSaisie 
s.executerRequeteAjax( thi s.adresseRecherche, texteSaisie) ; 

ion. prototype. executerRequeteAjax = function(<-0 

adresseRecherche,texteSaisie){ 
(...) 
} 

Completion. prototype. traiterReponseAjax = function(valeur){<-© 
if (valeur != nul 1 ){ 

// affectation de la nouvelle valeur 
this. baseNoeud. val ue = valeur; 
} 
} 

Ladresse utilisee afin de determiner le texte complete est initialisee en se fondant sur 
l'attribut adresseCompletion (repere ©) de la balise HTML du champ. Cette adresse est 
utilisee afin de mettre en ceuvre une requete Ajax lors d'une saisie de caracteres dans la 
zone. La saisie est detectee en se fondant sur l'evenement keyup (repere ©) du champ 
texte. La methode complete (repere©) est enregistree en tant qu'observateur de cet 
evenement et implemente ces traitements. 

Cette methode a la responsabilite de declencher une requete Ajax asynchrone en se fondant 
sur la methode executerRequeteAjax (repere©). Comme nous utilisons Ajax en mode 
asynchrone, la methode de rappel trai terReponseAjax (repere ©) est definie dans la classe 
Compl eti on afin de recevoir la reponse de cette requete et de mettre a jour la zone de saisie. 

La mise en oeuvre de ce composant montre comment modulariser dans une classe JavaScript 
ses differents comportements. La mise en oeuvre dans la page Web de ce composant est 
tres simple et uniquement fondee sur le langage HTML. 



Liste de selection 



Une liste de selection est un composant graphique permettant de selectionner une valeur dans 
une liste deroulante. La balise sel ect du langage HTML fournit une liste de selection simple 
mais n'offre pas de fonctionnalites de filtrage afin de restreindre le nombre de valeurs 
presentees a l'utilisateur. 
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Nous allons voir comment mettre en oeuvre un composant de ce type offrant des fonc- 
tionnalites de filtrage des donnees de la liste. 

La balise select etant peu parametrable, nous ne l'utilisons pas pour construire la struc- 
ture de notre composant graphique et preferons nous appuyer sur des balises HTML, 
comme dans le code suivant : 

<table width="200px" border="0" eel 1 paddi ng=" 0" cellmargin="0"/> 
<tr val ign="top"> 
<td width=100%> 

<input type="text" style="width: lOO5£;"/><-0 
</td> 
<td> 

<img border="0" src="combo.png"/><-© 
</td> 
</tr> 
</table> 
<di v styl e="posi tion : rel ati ve ; "> 

<di v style="displ ay : none; "></di v><— © 
</div> 

Le composant comporte une zone de saisie (repere O) permettant a l'utilisateur de filtrer 
les valeurs contenues dans la liste deroulante. Cette derniere est mise en oeuvre par le 
biais d'une balise di v (repere ©) presentant uniquement les valeurs filtrees par rapport au 
texte saisi. 

La balise img (repere ©) permet d'afficher ou de masquer la liste de selection mise en 
oeuvre avec la balise di v. 

La figure 9.4 illustre l'apparence des balises HTML mises en oeuvre dans le code ci- 
dessus. 



Figure 9.4 

Apparence des elements 
de la liste de selection 



Maintenant que nous avons construit la structure graphique du composant, nous pouvons 
nous attacher au developpement de sa classe JavaScript. Cette derniere cree les balises 
HTML en se fondant sur le DOM tout en gerant les evenements du composant. 
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Le composant graphique est implements par 1' intermediate de la classe ListeSelection, 
comme l'indique le code suivant : 

function ListeSelection(noeudContenu){ 

this.noeudContenu = null; 

this.nodeTexte - null; 

this.url = nul 1 ; 

this.conteneurListe = null; 

this.l isteAffichee = false; 
} 
ComboBox. prototype. construire = function(){ 

// Creation de la structure graphique du composant 

var combo = document .createDocumentFragment( ) ; 

var tableau = document. createElementC'table" ) ; 

combo. appendChild( tableau) ; 

var tbody = document .createElementC'tbody") ; 

tableau. appendChild(tbody) ; 

var tr = document. createElement( "tr" ) ; 

tbody. appendChild(tr) ; 

var tdl = document. createElementC'td") ; 

tr.appendChild(tdl); 

// Zone de saisie de la combo 

var texte = document. createElement( "input") ; 

texte.className = "comboTexte" ; 

tdl. appendChildt texte) ; 

this.nodeTexte = texte; 

// Image 

var td2 = document. createElementC'td") ; 

tr.appendChild(td2); 

var img = document. createElementC'img") ; 

td2.appendChild(img) ; 

img.src = "combo. png"; 

/* Enregistrement d'un observateur pour 1'evenement click 
de 1 'image pour ouvrir ou fermer la liste de valeur */ 

enregistrerObservateurObjet(img, "cl ick" , 

this, this.gererAffichage) ; <-© 

// Ajout de la structure au nceud de base 

this.noeudContenu.appendChild(combo) ; 

// Creation du div contenant la liste de valeurs 

var div = document. createElementC'div") ; 

div. style. display = "none"; 

di v.cl assName = "comboListe" ; 

this.conteneurListe = div; 

this.noeudContenu.appendChild(di v) ; 

/* Enregistrement d'un observateur pour 1'evenement keydown 

pour filtrer les valeurs affichees */ 
enregistrerObservateurObjet(this.nodeTexte , "keydown", 

this, this. filtrer);*-© 
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La methode construi re a la responsabilite de construire la structure du composant graphique 
en se fondant sur le DOM. Elle permet egalement d'enregistrer des observateurs afin de 
traiter les clics (repere O) sur l'image ainsi que la saisie de texte (repere ©) dans la zone. 
Ces deux observateurs sont implemented respectivement par les methodes gererAf f i chage 
et f il trer. 

La methode gererAf fi chage permet d'afficher et de masquer les valeurs de la liste, comme 
dans le code suivant : 

ListeSelection. prototype. gererAf fi chage = function(evenement){ 
if (this.isListOpenM 

this.l isteAffichee = false; 

this. conteneurListe. style. display = "none"; 
}else{ 

this.l isteAffichee = true; 

this. conteneurListe. style. display = "block"; 



La fonctionnalite de filtrage des valeurs de la liste en fonction de la saisie de l'utilisateur 
est implementee par la methode filtrer. Cette methode est declenchee chaque fois 
qu'une touche est saisie dans la zone. Lajout de l'evenement keydown situe au repere © 
permet d'invoquer la methode f i 1 trer. 

Le code suivant detaille 1' implementation des methodes filtrer et gererAf fi chage de la 
classe permettant de filtrer les donnees affichees dans la liste : 

ListeSelection. prototype. filtrer = function(e){ 

// Utilisation de la methode resetContenu pour vider la liste 

this.resett ) ; 

var filtreValeur = this. nodeTexte. value; 

/* Execution d'une requete AJAX pour filtrer les valeurs 
de la botte de selection */ 

(...) 
} 

// ajoute des valeurs dans la liste 
ListeSelection. prototype. ajouteValeurs = function(valeurs) { 

// Affichage de la liste 

this.l isteAffichee - true; 

this. conteneurListe. style. display = "block"; 

// ajout de ligne dans la liste de valeurs 

(...) 
} 

// Supprime les valeurs de la liste 
ListeSelection. prototype. reset - function(){ 

this. conteneurListe. innerHTML = ""; 
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La methode fUtrer execute une requete Ajax en specifiant la methode ajouteValeurs en 
tant que methode de traitement de sa reponse. Cette derniere methode affiche le resultat 
dans la liste de valeurs contenue dans la balise div. 

No tons que le mode asynchrone des requetes Ajax prend ici tout son sens en ce qu'il 
permet de ne pas bloquer l'utilisateur pendant que la requete est transmise au serveur. 



Conclusion 



Ce chapitre a detaille des solutions permettant d'organiser les composants graphiques 
d'une page Web en se fondant sur le langage JavaScript, ces composants formant les 
briques de base pour la construction des interfaces Web. 

L' implementation de composants graphiques met en oeuvre divers aspects techniques, 
tels que la programmation orientee objet, arm de definir leur structure, la technologie 
DOM, arm de creer leur structure graphique et leur apparence en se fondant sur des styles 
CSS, et la gestion des evenements. 

L utilisation des techniques Ajax offre la possibilite de gerer les donnees des composants 
graphiques de maniere autonome et sans impacter le reste de la page Web. 

Lors de la mise en ceuvre d'interfaces graphiques Web riches, l'utilisation de composants 
graphiques est primordiale puisqu'elle permet de structurer et de simplifier leur mise en 
oeuvre. Ces composants permettent de modulariser les traitements tout en favorisant leur 
reutilisation et l'integration des specificites des navigateurs. 



Partie IV 



Bibliotheques JavaScript 
graphiques 



Nous avons detaille jusqu'a present les differents concepts fondes sur les technologies 
JavaScript, HTML/xHTML et CSS afin de mettre en oeuvre des applications Internet 
riches. 

Plutot que d'implementer ces differents concepts, une bonne pratique consiste a utili- 
ser des bibliotheques eprouvees. Ces dernieres permettent de mettre en oeuvre ces 
mecanismes aussi bien globalement que pour une fonctionnalite bien precise ainsi que 
d'integrer les specificites des navigateurs au niveau de leurs supports, et non plus dans 
le code des applications JavaScript. 

Le chapitre 10 introduit les differentes bibliotheques JavaScript graphiques legeres 
qui implementent un ensemble de fonctionnalites, telles que la gestion des evenements 
et des effets. 

Le chapitre 11 est dedie a la bibliotheque dojo, et le chapitre 12 a la bibliotheque 
graphique rialto. 
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Les bibliotheques 
graphiques legeres 



Avant d'etudier des bibliotheques JavaScript completes, telles que dojo et rialto, nous 
allons evoquer 1' utilisation de bibliotheques legeres se focalisant sur des preoccupations 
specifiques des developpements Web, tels que les evenements et les effets. 

Ces bibliotheques offrent la possibility d'implementer des comportements graphiques 
evolues sans avoir a mettre en oeuvre des mecanismes complexes. 

Nous decrirons d'abord la partie graphique de la bibliotheque prototype, dont les bases 
ont ete abordees au chapitre 6, puis nous detaillerons deux bibliotheques interessantes, 
behaviour et script.aculo.us, qui permettent de gerer respectivement les evenements et les 
effets dans les pages Web. 

La bibliotheque prototype 

Comme indique brievement au chapitre 6, relatif aux fonctionnalites non graphiques de 
prototype, cette bibliotheque offre des fonctionnalites permettant d'interagir avec des pages 
Web. Celles-ci peuvent etre regroupees en trois categories : la modification du contenu et du 
rendu de pages HTML, la gestion des evenements et le support des formulaires HTML. 

Nous detaillons dans le present chapitre la mise en oeuvre de ces fonctionnalites. 

Manipulation d'elements de I'arbre DOM 

La bibliotheque prototype fournit Fobjet El ement afin de manipuler facilement les elements 
de I'arbre DOM d'une page HTML. 
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Le tableau 10.1 recapitule les differentes methodes de cet objet. 
Tableau 10.1 Methodes de lobjet Element 



Methode 


Parametre 


Description 


addClassName 


Lidentifiant de I'element 
et nom de la classe 


Positionne la classe pour I'element. 


cleanWhitespace 


Lidentifiant de I'element 


Supprime tous les noeuds de texte vides dans la liste des sous-nceuds 
de I'element. 


classNames 


Lidentifiant de I'element 


Retourne le nom de la classe CSS associee a I'element, ou une chaine 
vide si aucune ne lui ait associee. 


empty 


Lidentifiant de I'element 


Retourne true si I'attribut i nnerHTML de I'element ne contient rien ou 
des espaces, et fal se dans le cas contraire. 


getDimensions 


Lidentifiant de I'element 


Renvoie une structure contenant la largeur, son attribut width, et la 
longueur, son attribut height. 


getHeight 


Lidentifiant de I'element 


Retourne la hauteur de la representation graphique d'un element. 


getStyle 


Identifiant de I'element 
et la propriete de style 


Retourne la valeur de la propriete de style pour I'element. La valeur de 
retour est la valeur de la propriete dans la chaine de caracteres corres- 
pondent a son attribut styl e. Si cet attribut n'est pas present, la valeur 
null est renvoyee. 


hasClassName 


Lidentifiant de I'element 


Retourne true si une classe est associee a I'element, et false dans 
le cas contraire. 


hide 


Lidentifiant de I'element 


Permet de positionner la valeur de I'attribut display de I'element a 
none pour le masquer. 


makeCl ipping 


Lidentifiant de I'element 


Applique les parametres de positionnement. 


makePositioned 


Lidentifiant de I'element 


Applique les parametres de positionnement s'ils ne sont pas specifies 
dans I'attribut styl e de I'element. Specifie egalement que I'element est 
positionne. 


remove 


Lidentifiant de I'element 


Permet de supprimer I'element de I'arbre DOM dans lequel il se trouve. 


removed assName 


Lidentifiant de I'element 
et nom de la classe 


Supprime la classe pour I'element. 


scrollTo 


Lidentifiant de I'element 


Deplace la barre de defilement pour que I'element soit visible. 


setStyle 


Lidentifiant de I'element et le 
tableau associatif contenant la 
liste des elements de style 


Positionne les differentes proprietes de style pour I'element. 


show 


Lidentifiant de I'element 


Permet de positionner la valeur de I'attribut di spl ay de I'element avec 
la chaine vide pour le rendre visible. 


toggle 


Lidentifiant de I'element 


Permet d'inverser la valeur de I'attribut di spl ay de I'element rendant 
visible I'element s'il est cache, et inversement. 


undoCl ipping 


Lidentifiant de I'element 


Reinitialise les parametres de positionnement avec ceux specifies 
dans I'attribut styl e de I'element. 


undoPositioned 


Lidentifiant de I'element 


Reinitialise les parametres de positionnement et specifie que I'element 
n'est pas positionne. 


update 


Lidentifiant de I'element 


Permet de mettre a jour le contenu de la balise avec un fragment HTML 
contenu dans une chaine de caracteres. 


visible 


Lidentifiant de I'element 


Retourne la valeur false si la valeur de I'attribut di spl ay de I'element 

vaut none, et true dans le cas contraire. 
I 
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Nous allons detailler les principales de ces methodes de manipulation des elements. 

La methode toggl e offre la possibilite de rendre visible ou non un element en inversant le 
mode d'affichage : si 1' element est visible, elle le masque, et inversement. 

Le code suivant illustre la mise en oeuvre de cette methode (repere O) afin d'afficher et 
de masquer le paragraphe d'identiriant monParagraphe (repere ©) : 

<html> 
<head> 
(...) 
<script type="text/javascript"> 

function toggleParagraphe( ) {<-0 

El ement. toggl e( "monParagraphe" ) ; 
) 
</script> 
</head> 
<body> 

<p id="monParagraphe">Un paragraphe</p><-© 
(...) 
</body> 
</html> 

La methode update permet de mettre a jour facilement le contenu d'une balise. Elle prend 
en parametre l'identifiant de 1' element a mettre a jour ainsi que son nouveau contenu 
sous forme de chaine de caracteres, cette derniere pouvant contenir du code HTML. 

Le code suivant illustre la mise en oeuvre de cette methode (repere O) pour mettre en gras 
le texte contenu dans le paragraphe d'identiriant monParagraphe repere ©) : 

<html> 
<head> 
(...) 
<script type="text/javascript"> 

function mettreEnGrasParagrapheC ) {<-0 
var element = $( "monParagraphe") ; 
var texte = element. innerHTML; 

El ement. update ("monParagraphe" , "<b>"+texte+"</b>") ; 
} 
</script> 
</head> 
<body> 

<p id="monParagraphe">Un paragraphe</p><-© 
(...) 
</body> 
</html> 

La methode getStyle donne acces a la valeur d'une propriete du style d'un element. Si 
cette valeur doit etre modifiee, la methode setStyl e peut etre mise en oeuvre. 
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Le code suivant permet de recuperer la valeur de la propriete text- a 1 i gn du style (repere O) 
du paragraphe d'identifiant monParagraphe (repere ©) : 

<html> 
<head> 
(...) 
<script type="text/javascript"> 

function mettreEnGrasParagraphe( ) {<-0 

var alignement = Element .getStyle( "monParagraphe" , "text-align"); 
// alignement contient la valeur « center » 
(...) 
} 
</script> 
</head> 
<body> 

<p id="monParagraphe" style="text-align:center">Un paragraphe</p><-© 
(...) 
</body> 
</html> 

Les methodes classNames, hasClassName, addClassName et removed assName permettent de 
manipuler le nom de classe d'un element. 

Le code suivant illustre la facon d' ajouter un nom de classe (repere O) pour le paragraphe 
d'identifiant monParagraphe (repere ©), s'il n'en possede pas deja un : 

<html> 
<head> 
(...) 
<script type="text/javascript"> 

function ajouterClasseParagraphe( ) {4-0 

if( ! Element. hasClassName( "monParagraphe") ) { 

Element.addCl ass Name ("monParagraphe" , "maClasse") ; 



</script> 
</head> 
<body> 

<p id="monParagraphe">Un paragraphe</p><-< 

(...) 
</body> 
</html> 



Ajout de blocs HTML 

La bibliotheque prototype propose un ensemble de classes, dont le nom est prefixe par 
Inserti on, qui permettent d'ajouter des elements dans l'arbre DOM d'une page HTML. 

La classe Inserti on. Before insere un element avant un nceud. Le constructeur de cette 
classe prend en parametre l'identifiant du noeud ainsi que le contenu a ajouter sous forme 
de texte, texte contenant au moins une balise racine. 

Cette classe est particulierement adaptee pour ajouter un paragraphe de texte avant un autre. 
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Par exemple, dans le code suivant, la fonction ajouterParagraphe (repere O) implemente 
l'utilisation de la classe Insertion. Before arm d'ajouter un paragraphe avant le paragra- 
phe d'identifiant monParagraphe (repere ©) : 

<html> 
<head> 
(...) 
<script type="text/javascript"> 

function ajouterParagraphe( ) (<-© 

new Insertion. Before( "monParagraphe" , "<p>Nouveau paragraphe</l i>") ; 
) 
</script> 
</head> 
<body> 

<p id="monParagraphe">Un paragraphe</p><-© 
(...) 
</body> 
</html> 

L'arbre DOM en me moire des paragraphes est modifie de la maniere suivante : 

I<p>Nouveau paragraphe</p> 
<p id="monParagraphe">Un paragraphe</p> 

La classe Insertion. After ajoute un element apres et au meme niveau qu'un noeud. Le 
constructeur de cette classe se fonde sur les memes parametres que precedemment. 

Cette classe s'utilise de la meme maniere que la classe Insertion. Before. Avec l'utilisation 
de cette classe, l'arbre DOM en memoire des paragraphes est modifie de la maniere suivante : 

|<p id="monParagraphe">Un paragraphe</p> 
<p>Nouveau paragraphe</p> 

La classe Insertion. Top ajoute un element a un nceud, cet element se trouvant alors en 
premiere position dans la liste des enfants du noeud. Le constructeur de cette classe prend 
les memes parametres que precedemment. 

Cette classe est particulierement adaptee a l'ajout d'un element en premiere position 
dans une liste HTML. 

Dans le code suivant, la fonction ajouterElementListe (repere O) implemente l'utilisation 
de la classe Insertion. Bottom pour inserer un element dans la liste d'identifiant ma Liste 
(repere ©) : 

<html> 
<head> 
(...) 
<script type="text/javascript"> 

function ajouterElementl_iste( ) {<-© 

new Insertion. TopC'maListe" , "<li>Nouvel elemental i>") ; 
) 
</script> 
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</head> 
<body> 

<ul id="mal_iste"><-© 

<li>Un element</li> 
</u1> 
(...) 
</body> 
</html> 

L'arbre DOM en memoire de la liste a ete modifie de la maniere suivante : 

<ul id="maListe"> 

<li>Nouvel elemental 1> 

<li>Un element</li> 
</ul> 

La classe Insertion. Bottom ajoute egalement un element a un noeud, l'element ajoute se 
trouvant en derniere position dans la liste des enfants du noeud. Le constructeur de cette 
classe prend les memes parametres que precedemment. 

Cette classe est mise en oeuvre de la meme maniere que la classe Insertion. Top. Avec 
l'utilisation de cette classe, l'arbre DOM en memoire de la liste est modifie de la maniere 
suivante : 



<ul id="mal_iste"> 

<li>Un element</li> 
<li>Nouvel elemental i> 

</ul> 



Gestion des evenements 



La bibliotheque prototype fournit un mecanisme independant des navigateurs permettant 
d'enregistrer et de desenregistrer des observateurs pour des evenements. 

Cette bibliotheque integre egalement un mecanisme automatique de liberation des obser- 
vateurs d'evenements lorsque la page HTML est detruite. Ce mecanisme est particuliere- 
ment interessant dans Internet Explorer ou dans les navigateurs fondes sur Gecko en ce 
qu'il previent les fuites memoire. 

Le tableau 10.2 recapitule les differentes methodes ajoutees a la classe Event, classe de 
base du support des evenements. 
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Methode 


Parametre 


element 


Levenement 


findElement 


Levenement et un nom de tag 


isLeftCl i ck 


Levenement et un nom de tag 


observe 


Lidentifiant de I'element, le nom 
de I'evenement, la fonction cor- 
respondant a I'observateur et 
eventuellement un booleen pre- 
cisant si I'evenement doit etre 
capture. 


pointerX 


Levenement 


pointerY 


Levenement 


stop 


Levenement 




stopObservi ng Lidentifiant de I'element, le nom 
de I'evenement, la fonction cor- 
respondent a I'observateur et 
eventuellement un booleen pre- 
cisant si I'evenement doit etre 
capture. 



Tableau 10.2 Methodes de I'objet Event 



Description 

Retourne I'element qui a genere I'evenement. 

Retourne un premier element situe sous I'element declencheur de I'evene- 
ment et dont le nom correspond a celui passe en parametre. 

Retourne true si I'evenement a ete declenche a partir d'un die sur le bouton 
gauche de lasouris. 

Enregistre une fonction d'observation sur un element pour un evenement 
donne. Le dernier parametre est optionnel et specifie si I'evenement doit 
etre capture par I'observateur et ne doit ainsi pas etre remonte dans 
I'arbre DOM. Lutilisation des fonctions anonyme n'est pas recommandee, 
car elle ne permet pas de desenregistrer les observateurs par I'interme- 
diaire de la methode stopObservi ng. 

Retourne la position horizontale du pointeur de la souris dans la fenetre 
du navigateur. 

Retourne la position verticale du pointeur de la souris dans la fenetre du 
navigateur. 

Arrete I'execution du comportement par defaut de I'evenement et suspend sa 
propagation. Cette methode est equivalents a la methode preventDef aul t. 

Desenregistre une fonction d'observation sur un element pour un evene- 
ment donne. Les parametres avec lesquels la methode est appelee doi- 
vent etre les memes que ceux utilises pour la methode observe lors de 
I'enregistrement. 



Les deux methodes principales de la classe Event sont observe et stopObservi ng. Elles 
permettent respectivement d'enregistrer un observateur pour un evenement et de le 
desenregistrer. 

Le code suivant illustre la maniere d'enregistrer un observateur pour une balise d'identi- 
fiant monBouton representant un bouton : 

I function monObservateur(event) { 
(...) 



Event. observe ( "monBouton" ."click" .monObservateur) ; 

Pour desenregistrer un observateur, la methode stopObservi ng doit etre appelee avec les 
memes parametres que lors de I'enregistrement de I'observateur. Le code suivant illustre 
la mise en oeuvre de cette methode : 

Even t.stopObservingt "monBouton" , "click" .monObservateur) ; 

Aucune methode n'est fournie pour enregistrer en tant qu' observateur une methode d'un 
objet. Seul I'enregistrement de fonctions est supporte. 

La classe Event fournit des constantes correspondant a des codes pour des evenements 
issus du clavier. Ces dernieres sont recapitulees au tableau 10.3. 
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Tableau 10.3 Constantes de la classe Event 



Constante 


Code de levenement 


Description 


KEY_BACKSPACE 


8 


Touche d'effacement arriere 


KEY_TAB 


9 


Touche tabulation 


KEY_RETURN 


13 


Touche entree 


KEY_ESC 


27 


Touche d'echappement 


KEY_LEFT 


37 


Touche fleche gauche 


KEY_UP 


38 


Touche fleche haut 


KEY_RIGHT 


39 


Touche fleche droite 


KEY_D0WN 


40 


Touche fleche bas 


KEY_DELETE 


46 


Touche d'effacement 



En plus de la classe Event, prototype fournit un ensemble d'observateurs predefinis pour 
divers types d'elements. Le tableau 10.4 recapitule les differentes classes correspondantes. 

Tableau 10.4 Classes d'observateurs fournies par la bibliotheque prototype 



Classe 

Form. Element. Observer 
Form. Observer 

Form. Element. EventObserver 
Form. EventObserver 



Description 

Utilisee pour detecter la modification de la valeur d'un element de formulaire 
Utilisee pour detecter la modification des valeurs des elements de formulaire 
Utilisee pour traiter differents evenements d'un element de formulaire 
Utilisee pour traiter differents evenements d'elements de formulaire 



Les deux premiers observateurs du tableau heritent de la classe abstraite Abstract. Time- 
dObserver, qui, comme son nom l'indique, scrute les valeurs d'un element ou d'un formulaire 
a intervalle regulier. Cet intervalle est specifie par l'intermediaire du second parametre 
des constructeurs des classes Form. Element. Observer et Form. Observer. Si une modification 
se trouve detectee, la fonction de l'observateur est appelee. 

Cette derniere utilise deux parametres, dont le premier correspond a 1' element declenchant 
l'evenement. Le second renvoie soit a la valeur del' element (Form. Element. Observer), soit 
a la serialisation du formulaire sous forme de chaine de caracteres (Form. Observer). 

Le code suivant illustre la mise en ceuvre de deux observateurs de types Form . El ement . Observer 
(reperes O) et Form. Observer (reperes ©) afin de detecter les modifications survenues 
dans le formulaire d'identifiant monFormul ai re (repere ©) : 



<html> 
<head> 



(...) 

<script type="text/javascript"> 

function observateurChamp2(element, valeur) 
(...) 
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function observateurMonFormul ai re(element, valeur) {<-© 

(...) 
} 
function enregistrerObservateurs( ) { 

new Form. Element. 0bserver("champ2" , 1, observateurChamp2) ;<-© 
new Form.ObserverC'monFormulaire" , 1, observateurMonFormul aire) ;<- © 
) 
</script> 
</head> 

<body onload="enregistrerObservateurs( ) ; "> 
<form id="monFormulai re"><-@ 

<input type="hidden" id="champl" name="champl" val ue="valeurl"/> 
<input type="text" id="champ2" name="champ2" val ue="valeur2"/> 
<input type="text" name="champ3" value="valeur3"/> 
</form> 
(...) 
</body> 
</html> 

Lors de la modification du champ d'identifiant champ2, la fonction observateurChamp2 est 
appelee. De meme, lorsqu'une modification se produit au sein du formulaire d'identifiant 
monFormulaire par le biais des champs d'identifiant champ2 ou champ3, la fonction observa- 
teurMonFormul ai re est executee. 

Les deux derniers observateurs du tableau 10.4 heritent de la classe abstraite Abstract. Event- 
Observer, qui, comme son nom l'indique, se fonde sur les evenements. lis permettent 
d'observer differents evenements d'elements d'un formulaire. 

Les deux evenements supportes dans la version actuelle sont les suivants : 

• clic sur une case d'option (radio button) ; 

• changement de la selection d'un element dans une liste a selection multiple. 

Si l'element passe en parametre du constructeur de ces observateurs est un formulaire, 
les observateurs sont enregistres pour tous les elements de ce formulaire. Si un element 
de formulaire est specifie, les observateurs s'appliquent uniquement a cet element. 

Les observateurs fonctionnent de la meme maniere que precedemment. 

Le code suivant illustre la mise en oeuvre de deux observateurs de types Form. El ement . Event- 
Observer (reperes O) et Form.EventObserver (reperes ©) afin de detecter les modifications 
survenues dans le formulaire d'identifiant monFormul ai re (repere ©) : 

<html> 
<head> 
(...) 
<script type="text/javascript"> 

function observateurChamp2(element, valeur) (<-0 

(...) 
} 

function observateurMonFormulairetelement, valeur) {<-© 
(...) 
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function enregistrerObservateurst ) { 

new Form. Element. EventObservert "champ2" , 

observateurChamp2) ; <-© 
new Form. EventObservert "monFormul a i re" , 

observateurMonFormul aire) ; «-© 
} 
</script> 
</head> 
<body onload=" enregistrerObservateurst ) ; "> 



<-© 

id="champl" 
champl" value="valeurl"/> 
radio" id="champ2" 
champ2" value="valeur radio l"/> 
radio" id="champ2" 
champ2" value="valeur radio 2"/> 
text" name="champ4" val ue="valeur4"/> 



<form id="monFormulai re 
<input type="hidden 

name 
<input type 
name 
<input type 
name 
<input type 
</form> 
(...) 
</body> 
</html> 

Des lors que l'utilisateur change la selection pour les cases d'option (champ d'identifiant 

champ2), les fonctions observateurChamp2 et observateurMonFormul ai re sont executees. 

Si les evenements fournis en standard sont insuffisants, la modification de la methode 
registerCallback de la classe abstraite Abstract. EventObserver peut toujours etre envisagee 
pour supporter d'autres types d' elements. 



Support des formulaires HTML 

prototype met en oeuvre l'objet Form pour gerer les informations et l'apparence des 
formulaires HTML. Le tableau 10.5 recapitule ses differentes methodes. 



Tableau 10.5 Methodes de l'objet Form 



Methode 


Parametre 


Description 


disable 


L'identifiant du formulaire 


Permet de desactiver tous les elements d'un formulaire. La methode spe- 
cifie lavaleur true pour leur attribut disabled. 


enable 


L'identifiant du formulaire 


Permet d'activer tous les elements d'un formulaire. La methode specifie 
la valeur « », correspondant a la chaine de caracteres vide, pour leur 
attribut disabled. 


findFi rstElement 


L'identifiant du formulaire 


Retourne le premier element du formulaire non cache, actif et dont la 
balise est input, select ou textarea. 


focusFi rstElement 


L'identifiant du formulaire 


Positionne le curseur sur le premier element du formulaire, element 
determine par I'intermediaire de la methode findFi rstElement. 


getElements 


L'identifiant du formulaire 


Permet de recuperer sous forme de tableau tous les elements du formulaire. 
Les elements du tableau correspondent a des elements de I'arbre DOM. 
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Tableau 10.5 Methodes de I'objet Form (suite) 



Methode 

getlnputs 

reset 
serial ize 



Parametre 

L'identifiant du formulaire, 
le type de champ de saisie 
et son nom 

L'identifiant du formulaire 

L'identifiant du formulaire 



Description 

Retourne un tableau contenant les champs de saisie du formulaire cor- 
respondent au type et au nom specifies en parametres. 

Reinitialise toutes les valeurs des elements du formulaire. 

Permet de construire une chaine de caracteres a partir des differents 
elements du formulaire. Les valeurs des elements sont separees par le 
caractere &. 



La methode getEl ements offre la possibilite d'avoir acces rapidement a tous les elements 
d'un formulaire, cette methode renvoyant les elements DOM correspondants. 

Dans le code suivant, la fonction trai terVal eursFormul ai re (repere O) est mise en ceuvre pour 
recuperer les differentes valeurs des champs du formulaire d'identifiant monFormulaire 
(repere ©) : 

<html> 
<head> 
(...) 

<script type="text/javascript"> 
(...) 
function traiterValeursFormulaire () (<-0 

var elements = Form. getElementst "monFormulaire") ; 
var valeurs = {} ; 

fort int cpt=0; cpt<el ements. length; cpt++) { 
var element = elements[cpt] ; 
valeurs[element.name] = element. value; 
} 

/* valeurs est equivalent au tableau associatif 
suivant: 

{ "champl": "valeurl", 
"champ2": "valeur2", 
"champ3": "valeur3" }*/ 
(...) 
) 
</script> 
</head> 
<body> 

<form id="monFormulai re"><-© 

<input type="hidden" name="champl" val ue="valeurl"/> 
<input type="text" name="champ2" value="valeur2"/> 
<input type="text" name="champ3" value="valeur3"/> 
(...) 
</form> 
(...) 
</body> 
</html> 
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La methode get Inputs offre un acces rapide a des elements d'un formulaire dont le nom 
de la balise est i nput. Cette methode prend en parametre le nom du formulaire, le type de 
la balise ainsi que son nom. 

Le code suivant illustre la mise en oeuvre de cette methode afin de recuperer le champ cache 
du formulaire d'identifiant monFormul ai re de l'exemple precedent : 

var 1 isteChamps = Form.getlnputsC'monForrnulai re" , 

"hidden", "champl"); 
var champCache = 1 isteChamps[0] ; 
var valeurChampCache = champCache. value; 
// valeurChampCache contient « valeurl » 

La methode serialize construit une chaine de caracteres avec les diverses valeurs des 
elements du formulaire. Cette chaine contient les differents couples cle-valeur separes 
par le caractere &. 

Le code suivant se fonde sur le formulaire utilise dans l'exemple relatif a la methode 
getEl ements et decrit l'utilisation de la methode serial 1 ze : 

I var chaineValeurs = Form. serial ize( "monFormulaire") ; 
/* chaineValeurs contient « champl=valeurl&champ2=valeur2&champ3=valeur3 » */ 

Lobjet Form se fonde sur l'objet FormElement, mais il est egalement possible d'utiliser ce 
dernier directement. II met pour cela a disposition les methodes serial i ze et getVal ue, qui 
permettent respectivement d'encoder et de recuperer la valeur d'un champ de formulaire. 

Le code suivant illustre l'utilisation de la methode getVal ue : 

I var valeurChampl = Form. Element. getVal ueC'champl") ; 
// valeurChampl contient la valeur « valeurl » 

En resume 

La bibliotheque prototype propose d'interessantes fonctionnalites afin de developper des 
pages comprenant des traitements graphiques JavaScript evolues. 

Ces mecanismes s'ajoutent a ceux decrits au chapitre 6 afin d'offrir des solutions aux 
principales problematiques du developpement d' applications Web 2.0. 

L'utilisation de cette bibliotheque est egalement recommandee pour les applications Web 
classiques desirant enrichir leur interface graphique en se fondant sur des technologies 
DHTML etAjax. 

La bibliotheque behaviour 

Une bonne pratique de developpement Web consiste a bien separer le code JavaScript du 
code HTML des pages Web. Le fait que le HTML permette de definir les evenements 
associes a des balises HTML directement dans leur definition par le biais d'attributs 
particuliers nuit grandement a la lisibilite des pages, puisque cela revient a melanger diverses 
preoccupations. 
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La bibliotheque behaviour offre un mecanisme interessant afin de rattacher des evene- 
ments JavaScript a des balises par 1' intermediate de styles CSS. De la sorte, aucun code 
JavaScript n'est defini au niveau des balises HTML. 

La bibliotheque offre ainsi une solution de rechange au code HTML suivant, solution 
specifiant les evenements directement dans les attributs des balises (repere O) : 

<html> 
<head> 

<script type="text/javascript"> 

function traiterEvenement(evenement) { 

(...) 
) 
</script> 
</head> 
<body> 
(...) 

<input type="button" onclick="traiterEvenement( ) ;" value="Un bouton'7 ><-© 
(...) 
</body> 
</html> 



Installation et mise en oeuvre de la bibliotheque behaviour 

La bibliotheque consiste en un unique fichier JavaScript, nomme behaviour.js. Ce 
dernier doit etre ajoute dans la page Web desirant utiliser la bibliotheque, comme dans le 
code suivant : 

<html> 
<head> 
(...) 

<script type=" text/ javascript" src=" behaviour. js"X/script> 
(...) 
</head> 
(...) 
</html> 

Letape suivante consiste a definir un tableau associatif permettant de mettre en relation 
des selecteurs CSS avec des fonctions. Les fonctions doivent comporter un parametre 
correspondant a un element de l'arbre DOM de la page. 

Le code suivant montre comment mettre en ceuvre ce tableau : 

var regies = { 

'div.maClasse' : function (element) { 
(...) 
}, 
'#monIdentifiant b': function(element) { 
(...) 
) 
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Les cles du tableau associatif correspondent a des selecteurs CSS permettant d'identifier 
les balises impactees. 

Dans la page HTML suivante, les regies div.maClasse et #monIdentifiant b decrites dans 
le code ci-dessus permettent d'impacter respectivement les balises div (repere O) et b 
(repere ©) : 

<html> 
(...) 
<body> 

<div class="maClasse">( ...)</div>«-0 
<p id="monIdentifiant"> 

<b>Un texte en gras.</b><-© 
</p> 
</body> 
</html> 

Une fois le tableau precedent applique a la page, la bibliotheque appelle les fonctions 
pour les elements correspondant aux selecteurs CSS au chargement de la page. Dans 
l'exemple ci-dessus, la premiere fonction est appelee avec l'element correspondant a la 
balise di v et la seconde avec celui de la balise b. 

Des evenements peuvent des lors etre associes aux elements par rintermediaire du DOM. 

Le code suivant decrit la facon d'ajouter l'evenement mouseover a la balise div (repere O) 
et cl i ck a la balise b (repere ©) : 



var regies - l 
'div.maCl asse' 



), 



: function (element) { 
element. onmouseover= functionO {<-© 

alertC'La souris est sur la balise div "); 
} 



'#monIdentifiant b': function(element) { 

element. onclick - functionO {<-© 

alertC'L'utilisateur a clique sur le texte"); 
} 
} 



); 



La facon d'enregistrer les observateurs d' evenements n'est pas imposee par behaviour. II 
est ainsi parfaitement possible d'utiliser l'approche precedemment decrite pour la biblio- 
theque prototype. 

Les regies definies ci-dessus se doivent d'etre desormais appliquees a la page HTML. 
Pour gerer l'application de ces regies, la bibliotheque fournit l'objet Behaviour. 

Cet objet contient une methode register, qui permet d'appliquer des regies lors de 
l'initialisation d'une page Web. 
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Le code suivant illustre la mise en oeuvre de cette methode (repere O) : 

<html> 
<head> 
(...) 

<script type="text/javascript"> 
var regies - (...) 
Behaviour, register (regies) ; <-0 
</script> 
(...) 
</head> 
</html> 

Ajoutons que si les regies doivent etre modifiees de maniere a prendre en compte des 
elements de l'arbre DOM ajoutes apres le chargement de la page, la methode apply suivante 
(repere O) de l'objet Behaviour est utilisee : 

<script type="text/javascript"> 
function appl iquerRegles( ) { 

var regies = { 

); 

Behaviour. register (regies) ; 

Beha vi our. appl y( ) ; <-€> 
} 
</script> 



En resume 



La bibliotheque behaviour offre une solution interessante et elegante afin de mettre en 
oeuvre la gestion des evenements en se fondant sur la technologie CSS. 

Cette bibliotheque de petite taille permet de bien structurer et separer les differents traite- 
ments JavaScript des elements HTML d'une page. L' initialisation de traitements relatifs 
a ces elements, tels que les enregistrements d'observateurs d'evenements, peut etre realisee 
simplement par le biais d'un tableau associatif. 



La bibliotheque script.aculo.us 

script.aculo.us offre egalement d'interessants mecanismes afin de mettre en oeuvre des 
effets speciaux, le mecanisme de glisser-deposer et des champs de saisie elabores. 

Le site de cette bibliotheque, accessible a l'adresse http://script.aculo.us/, fournit des docu- 
mentations ainsi que des demonstrations des differentes fonctionnalites disponibles. 

La bibliotheque est fondee sur prototype, cette derniere bibliotheque devant etre incluse 
dans les pages Web utilisant script.aculo.us. 

Pour mettre en oeuvre script.aculo.us, le fichier scrip taculous.js doit etre utilise en specifiant 
les differents modules souhaites apres le nom de ce fichier. Chaque module est contenu 
dans un fichier JavaScript dedie, ce qui permet de reduire la taille des fichiers charges. 
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Le code suivant illustre 1' installation de la bibliotheque : 

<html> 
<head> 
(...) 

<script type=" text/ javascript" s rc=" prototype. js"X/script> 
<script type=" text/ javascript" src="scriptaculous. js?load=effects,dragdrop"> 
**</script> 
</head> 
(...) 
</html> 



Effets 



Tous les effets de script. aculo. us se fondent sur cinq effets de base, dont les classes sont 
recapitulees au tableau 10.6. 

Tableau 10.6 Classes des effets de base de la bibliotheque script.aculo.us 



Classe 


Description 


Effect. Highlight 


Surligne un element. 


Effect. MoveBy 


Permet de deplacer un element. 


Effect. Opacity 


Permet de modifier I'opacite d'un element. 


Effect. Parallel 


Permet de combiner plusieurs effets afin de les realiser en parallele. 


Effect. Scale 


Permet de modifier la taille d'un element. 



L instantiation de ces differentes classes produit l'effet sur l'element specifie en parame- 
tre. L' utilisation de leurs constructeurs se realise toujours de la meme maniere, comme 
decrit ci-dessous : 

new Effect. EffectName(element, parametres-obl igatoi res, [options]); 

Le premier parametre determine l'element d'un arbre DOM sur lequel l'effet porte en le 
referencant directement ou en specifiant son identifiant. Le suivant correspond aux para- 
metres de configuration de l'effet. 

Les cinq effets principaux supportent les parametres de configuration recapitules au 
tableau 10.7. 

Tableau 10.7 Parametres de configuration des effets de base 

Effet Parametre 

Effect. Highlight Aucun 

Effect . MoveBy Les nouvelles positions x et y 

Effet. Opacity Aucun 

Effect. Parallel Le constructeur de cet effet ne suit pas exactement les autres constructeurs. Sa forme est la suivante : 

new Effect .Paral lei (tableau a" effets, options). 

Effect . Seal e Le pourcentage de modification de la taille. Des options specifiques sont egalement utilisables. 
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Le dernier parametre des constructeurs n'est pas obligatoire et peut etre utilise pour 
specifier des options ou enregistrer des observateurs sur le deroulement de l'effet par 
1' intermediate de fonctions de rappel. 

Les differentes options ainsi que les observateurs des effets de base sont recapitules 
respectivement aux tableaux 10.8 et 10.9. 

Tableau 10.8 Principales options de configuration des effets de base 



Parametre 


Valeur 


par 


defaut 


Description 


di recti on 


center 






Direction de la transition. Les valeurs suivantes sont utilisables : 
top-left, top-right, bottom-left, bottom-right, center. 


duration 


1.0 






Duree de l'effet en secondes 


fps 


25 






Nombre d'images par seconde 


from 


0.0 






Valeur de debut de la propriete sur laquelle joue l'effet, comme la valeur de 
I'opacite d'un element. 


to 


1.0 






Valeur de fin de la propriete sur laquelle joue l'effet. 


transition 


Effect 


Transitions. sinoidal 


Type de transition utilise. Cinq types sont utilisables : Effect. Transi- 
tions. sinoidal, Effect. Transitions .1 inear, Effect. Transi - 
ti on s. reverse, Effect. Transitions. wobble et 
Effect.Transitions.fi icker. 



Tableau 10.9 Fonctions de rappel des effets de base 



Fonction 

afterFinish 
afterUpdate 
beforeStart 
beforeUpdate 



Parametre 

L'instanoe de l'effet realise 
L'instance de l'effet realise 
L'instanoe de l'effet realise 
L'instanoe de l'effet realise 



Description 

Est appelee apres le dernier rafraichissement de I'affichage realise par l'effet. 
Est appelee apres chaque rafraichissement de I'affichage realise par l'effet. 
Est appelee avant le premier rafraichissement de I'affichage realise par l'effet. 
Est appelee avant chaque rafraichissement de I'affichage realise par l'effet. 



Le code suivant decrit la mise en oeuvre de l'effet Effect. Opacity (repere O), qui fait 
progressivement disparaitre un texte (repere ©) : 

<html> 
<head> 
(...) 

<script type="text/javascript"> 
function jouerEffetO {<-© 

var element = document. getElementByldC'monParagraphe" ) ; 
new Effect. Opacity(element, { 
duration: 2.0, 

transition: Effect.Transitions.l inear, 
from: 1.0, 
to: 0}): 
} 

(...) 
</script> 
</head> 
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<body> 

<p id="monParagraphe">Une texte.</p><-© 
</body> 
</html> 

Tous ces effets de base peuvent etre combines afin de realiser des effets beaucoup plus 
elabores. Les classes de ces effets elabores sont recapitulees au tableau 10.10. 

Tableau 10.10 Classes des effets elabores de la bibliotheque script.aculo.us 



Classe 






Description 


Effect .Apear, Ef1 


ect. Fade 




Fait apparaitre ou disparaitre un element. 


Effect. BlindDown, 


Effect. Bl 


'ndUp 


Deroule ou enroule un element pour le faire respectivement apparaitre ou disparaitre. 


Effect. DropOut 






Fait disparaitre un element en le deplagant tout en modifiant son opacite. 


Effect. Fold 






Reduit un element vers le haut puis vers la gauche. 


Effect. Grow 






Fait apparaitre un element du bas en le grossissant. 


Effect. Pulsate 






Fait apparaitre et disparaitre un element avec I'effet d'un battement de coeur. 


Effect. Puff 






Fait disparaitre un element comme un nuage de fumee. 


Effect. Shake 






Permet de « secouer » un element. 


Effect. Shrink 






Effet inverse du precedent 


Effect.SlideDown, 


Effect. SI 


'deLIp 


Deroule ou enroule un element pour le faire respectivement apparaitre ou disparaitre. 


Effect. Squish 






Reduit un element vers le coin haut et gauche. 


Effect. SwitchOff 






Donne I'illusion de faire disparaitre un element comme avec un interrupteur de television. 


Effect. toggle 






Permet d'inverser un effet. II est utilisable uniquement avec les couples d'effets Effect . Apea r/ 
Effect. Fade, Effect.BlindDown/Effect.BlindUp et Effect.SlideDown/Effect.Sli- 
deUp. II peut prendre en parametre respectivement appear, si ide et blind. 



La liste de ces effets peut evidemment etre enrichie en utilisant les cinq effets de base. 

Plutot que de detailler un par un les differents elements ci-dessus, nous allons decrire un 
exemple simple de mise en oeuvre d'un champ de saisie, issu des exemples fournis sur le 
site de script.aculo.us. En cachant et faisant apparaitre differents elements div avec des 
effets, nous remarquons que 1' interface graphique devient beaucoup plus facile a utiliser. 

L' exemple doit permettre de saisir une phrase afin de realiser une recherche. Cette phrase 
doit contenir au moins trois caracteres. Si tel n'est pas le cas, une alerte est remontee a 
l'utilisateur. Le resultat de la recherche apparait par-dessus la page courante et sous la 
zone de recherche afin de gagner de la place sur 1' interface graphique. 

L exemple est structure en quatre zones : 

• La premiere correspond a la zone de saisie et de declenchement de la recherche. Elle 
permet d'afficher la zone de configuration avancee de la recherche. 

• La seconde, masquee au debut, offre l'affichage d'un message d'erreur lorsque le nombre 
de caracteres de recherche n'est pas suffisant. 
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• La troisieme, masquee au debut, permet d'afficher un parametre de configuration 
avancee de la recherche. 

• La quatrieme, masquee au debut, correspond au resultat de la recherche. 

Le code suivant illustre V implementation de ces quatre zones, correspondant a des blocs div 
d'identifiants respectifs panel Principal (repere©), panel Avertissement (repere©), panel - 
Options (repere ©) et panel Resultats (repere ©). Nous avons retravaille le code afin de bien 
separer le code HTML et le code JavaScript, notamment au niveau de la gestion des evenements : 

<form id="monFormulai re" method="get" action=""> 
<div id="panel Principal "><-0 

<label for="champRecherche">Recherche:</l abel> 

<input class="box" name="champRecherche" id="champRecherche" type="text" /> 

<input type="submit" size="10" value=" Go! " /> 

<a href="#" id="optionsAvancees">Options avancees</a> 

<div id="panel Avertissement" style="display :none;"><-© 

Utiliser au minimum trois caracteres. 
</div> 
</div> 

<div id="panelOptions" style="display:none; "Xdi v><-© 
<a href="#" id="fermerOptions">Fermer</a> 

<input type="checkbox" name="details" id="optionDetail " checked="checked" /> 
Afficher le detail des resultats (toujours actif) 
</div></div> 

<div id=" con teneur Panel Resultats"Xdi v id=" panel Resultats" 
*»style="di splay: none; "Xdi v><-0 
<ul> 
<li> 

<a href="http:/ /prototype. conio.net/" target="_new">Biblotheque 
^»Prototype</aXbr/> 
Bibliotheque JavaScript orientee object 
</li> 
</ul> 

<a href="#" id="fermerResul tats">Fermer les resul tats</a> 
</divX/divX/div> 
</form> 

La figure 10.1 illustre l'apparence de la zone de recherche ainsi que de la zone des resultats. 

Figure 10.1 

Exemple de mise en aeuvre des effets de 
script.aculo.us 



arch: | 



javascript 



iGo! 1 1 Advanced options 



mir.aculo.u; 

My Weblog on cool stuff 

■ Prototype JavaScript library 
Object-oriented JavaScript goodness 

• Ruby on Rails 
Developer-friendly no-nonsense web application 
framework 

Close results 



3 L 

ib 

cc 
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Divers evenements sont attaches au formulaire et aux differents liens du code ci-dessus afin 
de declencher toutes sortes d'effets. L' initialisation des observateurs se fait par l'inter- 
mediaire de la methode initial 1 ser, executee lors du chargement de la page. 

Le code suivant decrit la mise en oeuvre des observateurs (les reperes O a © places dans 
le code sont commentes au tableau 10.11) : 

function executerRecherche(evt) {<-© 

if (Form.Element.getVal ueC'champRecherche" ) .lengthO) { 
Effect. Shake ("panel Principal ") ; 
Effect. Appear ( "panel Avert issement" , 
{duration:2.0, 

transit ion: Effect. Transitions. wobble}) ; 
} else { 

if ($( "panel Options") . style. display=="") 

Effect. SI ideUpt "edsubpanel ") ; 
if ($( "panel Avertissement" ) . style. display=="") 

Effect. Fade( "panel Avertissement" ) ; 
Effect. SI ideDownC panel Res ul tats" ) ; 
} 

evt.preventDefaul t( ) ; 
} 
function ouvri rOption(evt) {<-© 

new Effect. SI ideDownC panel Opt ions") ; 
evt.preventDefaul t( ) ; 
} 
function detailsChange(evt) {<-© 

new Effect. SI ideUpt "panel Opt ions" ) ; 
evt.preventDefaul t( ) ; 
} 
function fermerOptionst ) {<-© 

new Effect. SI ideUpt "panel Options" ) ; 
evt.preventDefaul t( ) ; 
} 
function fermerResultats( ) {<-© 

new Effect. SI ideUpt 'panel Res ul tats' ) ; 
evt.preventDefaul t( ) ; 
} 
function initialised ) {<-© 

Event. observe($("monFormulai re") ."submit" , executer Recherche) ; 
Event. observe($("optionsAvancees") , "cl ick" .ouvri rOption) ; 
Event. observe($( "optionDetail ") , "change" .detailsChange) ; 
Event. observe($( "fermerOptions") ."click" .fermerOptions) ; 
Event. observe($( "panel Res ul tats" ) , "cl ick" , fermerResul tats) ; 
} 
Event .observe (window. "load" .initial i ser) ; 

La fonction initialiser (repere ©) est rattachee a 1' evenement survenant lors du chargement 
de la page. Elle permet de configurer differents observateurs d'evenements. 
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Le tableau 10.11 recapitule les fonctions des effets et traitements realises par ces obser- 
vateurs. 



Fonction 

detail sChange 
(repere ©) 

executerRecherche 
(repere O) 



fermerOptions 
(repere 0) 

fermerResultats 
(repere ©) 

ouvrirOption 
(repere ©) 



Tableau 10.1 1 Traitements et effets des observateurs 



Element observe Description 



optionDetail 



monFormulai re 



fermerOptions 
panel Resul tats 
optionsAvancees 



Permet d'afficher la zone des options avancees. Utilise I'effet Effect. SI ideLlp, 
qui enroule vers le bas cette zone. 

Aucune recherche n'est vraiment implernent.ee. Permet de verifier si la lon- 
gueur de la chaine de recherche est superieure a deux caracteres. Si tel n'est 
pas le cas, une zone d'avertissement est affichee par I'intermediaire de I'effet 
Effect. Appear, et la boite de recherche est secouee par le biais de I'effet 
Effect . Shake. Dans le cas contraire, la zone de resultats de la recherche est 
affichee par lintermediaire de I'effet Effect.SlideDown, qui deroule vers le 
bas cette zone. 

Permet de masquer la zone des options avancees. Utilise I'effet Effect. SI i- 
deUp, qui enroule vers le haut cette zone. 

Permet de masquer la zone des resultats de la recherche. Utilise I'effet 
Effect . SI i deLIp, qui enroule vers le haut cette zone. 

Permet d'afficher la zone des options avancees. Utilise I'effet Effect.Slide- 
Down, qui deroule vers le bas cette zone. 



Glisser-deposer 



Pour mettre en oeuvre la fonctionnalite de glisser-deposer (Drag-and-Drop), script.aculo.us 
fournit la classe Draggable et l'objet Droppables. 

La classe Draggabl e permet de specifier qu'un element peut etre deplace vers un element 
cible dans le cadre d'un glisser-deposer. Elle fournit pour cela un constructeur, qui prend 
en parametres l'element impacte ainsi qu'un tableau associatif contenant differentes 
options et fonctions de rappel. 

Les tableaux 10.12 et 10.13 recapitulent respectivement les differentes options et fonctions 
de rappel disponibles pour ce constructeur. 



Tableau 10.12 Options du constructeur de la classe Draggable 



Option 


Valeur par defaut 


Description 


handle 


- 


Specifie que l'element ne peut etre glisse-depose qu'a I'interieur d'une zone dont la pro- 
priete correspond a I'identifiant. 


revert 


- 


Si la valeur est true, l'element retourne a sa position initiale a la fin du glisser-deposer. 


zindex 


false 


Correspond a la propriete CSS zi ndex de l'element impacte par le glisser-deposer. 


constraint 


- 


Si cette propriete peut prendre la valeur horizontal ou vertical, le glisser-deposer est 
restreint a la direction specifiee. 


ghosting 


false 


Permet le deplacement d'un element clone lors du glisser-deposer. L'element clone reste 
en place jusqu'a ce que le clone ait ete depose. 
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Tableau 10.13 Fonctions de rappel du constructeur de la classe Draggable 



Methode 


Parametre 


Description 


change 


Lelement deplace 


Appelee lorsque I'element est deplace dans un glisser-deposer. 


endeffect 


Opacity 


Definit I'effet utilise au debut du glisser-deposer. 


reverteffect 


Move 


Definit I'effet utilise lorsque I'element impacte par le glisser-deposer retourne a sa 
position d'origine. 


starteffect 


Opacity 


Definit I'effet utilise a la fin du glisser-deposer. 



L'objet Droppables permet de definir un element en tant que cible d'un glisser-deposer. 
Les methodes de cet objet sont recapitulees au tableau 10.14. 



Tableau 10.14 Methodes de l'objet Droppables 



Methode 

add 



Parametre 



Lidentifiant de I'element et le 
tableau associatif des options 
et methodes de rappel 

Lidentifiant de I'element 



Description 

Ajoute un comportement de cible d'un glisser-deposer pour I'element specifie. 
Cette methode permet de specifier differentes options ainsi que des fonctions de 
rappel sur les differents evenements du cycle de traitement du glisser-deplacer. 

Supprime le comportement de cible d'un glisser-deplacer pour I'element specifie. 



Comme decrit precedemment, la methode add prend comme second parametre un tableau 
associatif contenant les differentes options et fonctions de rappel recapitulees aux 
tableaux 10.15 et 10.16. 

Tableau 10.15 Options de la methode add de l'objet Droppables 



Option 

accept 

containment 
hovercl ass 
overlap 
greedy 



Valeur par defaut 



true 



Description 

Specifie une liste de classes CSS sous forme de chaine de caracteres ou de tableau. 
Lelement specifie dans la methode add accepte tous les elements possedant une ou 
plusieurs de ces classes afin de realiser un glisser-deposer. 

Lelement de la methode add accepte un element pour un glisser-deposer uniquement 
si ce dernier est contenu dans les elements specifies par cette option. 

Si elle est positionnee, I'element specifie dans la methode add prend ce style quand un 
element deplace est au-dessus de lui lors d'un glisser-deposer. 

Prend la valeur horizontal ou vertical. Si elle est positionnee, la cible ne reagit au 
glisser-deposer que si le chevauchement est de plus de 50 %. 

Si la valeur est true, arrete le deplacement et ne traite pas les autres cibles sous I'element 
deplace. 



Tableau 10.16 Fonctions de rappel de la methode addde l'objet Droppables 

Description 



Fonction de rappel Parametre 

onHover Lelement deplace, I'element cible et le pour- 

centage de chevauchement des elements 

onDrop Lelement deplace et I'element cible 



Appelee lors du deplacement d'un element au-dessus 
d'un autre qui I'accepte. 

Appelee lorsque I'element deplace est relache sur 
un element qui I'accepte. 
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Nous allons detailler l'exemple propose par le site de script.aculo.us afin de glisser-deposer 
des images sur une autre. 

La zone est constitute de deux elements, les images d'une tasse (repere O) et d'un t-shirt 
(repere ©), ainsi que de l'image d'une fleche (repere ©), comme l'indique le code suivant : 

<img i d="produi tl" cl ass="produits" src="images/product-l" alt="tasse" /><-© 

<img id="produit2" class="produits" src="images/product-2" al t="t-shi rt" /><-© 

<div id="caddy" cl ass="caddy"> 

<img src="images/deposer-here" alt="" /><-© 

<di v id="texte_caddy">Deposer les elements desires ici.</div> 

</div> 

La figure 10.2 illustre 1' aspect de cet exemple. 
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ever want right here. 
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Drag all the stuff you 
ever want right here. 



Figure 10.2 

Exemple de mise en eeuvre du glisser-deposer avec script.aculo.us 

Differents comportements sont alors appliques aux images, comme dans le code suivant 



unction initial 


iser( ) 








new 


Draggabl 


e( "produitl" 


, {revertitrue)) ; 


<-© 


new 


Draggabl 


e("produit2" 


' , {reve 


't:true} ) 


;<-© 


Droppables.a 


ddC'caddy" , 


{<-© 










accept: "pr 


oduits" 










hoverclass: 


"drophover" , 








onDrop: fun 


ctionte 


ement) I 








$("texte 


_caddy" 


.innerHTML = 






"L' element " + 


element. 


alt + 


)); 




t 









est relache. 



Event. observe (window, "load" .initial iser) ; 
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Par 1' intermediate du constructeur de la classe Draggabl e (reperes O), les deux premieres 
images deviennent des elements pouvant etre deplaces. La methode add de l'objet Droppabl es 
(repere ©) definit qu'ils peuvent etre deposes dans la zone d'identifiant caddy, zone identifiee 
par la fleche. 



Autocompletion 



La bibliotheque script.aculo.us fournit un support pour mettre en oeuvre 1' autocompletion. 
Ce mecanisme donne a un champ de saisie la possibilite d'offrir des choix en se fondant 
sur les caracteres deja saisis. Ce type de fonctionnement est communement utilise dans 
les interfaces Web de messagerie pour faciliter la saisie des adresses e-mail. 

La figure 10.3 illustre un exemple de champ supportant 1' autocompletion. 



Just a little test: 



Alejandro Patrick 
Anastasia Sonja 
Anatoly Darmo 
Angus Sanjay 
Anthea Nastassja 
Barbara Sjaak 
Benjamin Sanand 
Bruce Nastassja 
Carolyn Jamie 
Deadly Ninja 



Figure 10.3 

Exemple de champ utilisant V autocompletion 



Deux approches sont possibles pour determiner la liste des elements a afficher. La premiere 
consiste a construire cette liste localement en se fondant sur un tableau JavaScript contenu 
dans la page. La seconde est fondee sur la technologie Ajax. 

La premiere approche utilise la classe Autocompleter. Local, dont le constructeur prend 
quatre parametres : 

• l'identifiant du champ de saisie ; 

• l'identifiant de la zone permettant d'afficher les resultats de 1' autocompletion ; 

• le tableau contenant les donnees utilisees pour la completion ; 

• les options. 

Les options supportees par cette approche sont recapitulees au tableau 10.17. 
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Tableau 10.17 Options du constructeur de la classe Autocompleter.Local 



Option 


Valeur 


par 


defaut 


Description 


choices 


- 






Specifie le nombre de choix a afficher dans la liste d'auto completion. 


fullSearch 


false 






La recherche s'effectue a n'importe quel endroit du tableau de chaines de caracteres. 


ignoreCase 


true 






La recherche ignore la casse. 


partialChars 


2 






Le nombre de caracteres a saisir avant que I'auto completion ne fonctionne. 


partial Search 


true 






La recherche s'effectue uniquement sur le debut des chaines de caracteres du tableau. 



Le code suivant decrit une zone de saisie prete a utiliser l'autocompletion de script.aculo.us. 
Elle comprend un libelle de la zone (repere O), un champ de saisie d'identiflant 
(repere ©) et une zone initialement masquee permettant d' afficher les resultats de 1' auto- 
completion (repere ©) : 

<P> 

<label for="recherche">Champ de recherche:</label><-0 

<br /> 

<input id="recherche" autocomplete="off " size="40" type="text" valuer"" /><-© 
</p> 

<div cl ass="recherche_auto_complete" id="l iste_recherche" style="display:none"> 
*</div><-@ 

Le code JavaScript suivant permet d'appliquer le mecanisme d'autocompletion a la zone 
de saisie d'identiflant recherche : 

function initial iser( ) 

var donnees - [ "un texte", "un autre texte" ]; 

var options = { partialChars : 3}; 

new Autocompleter. Local ("recherche" , 

"1 iste_recherche" , donnees, options); 
} 
Event. observe (window, "load" .initial iser) ; 

Fondee sur la technologie Ajax, la seconde approche est implemented par 1' intermediate 
de la classe Ajax. Autocompl eter. Le constructeur de cette classe prend les memes parametres 
que la classe Autocompl eter . Local , si ce n'est que le troisieme correspond desormais a une 
adresse, laquelle a la responsabilite de retourner le resultat de la completion. 

Lors d'une saisie dans un champ, une requete HTTP de type POST est executee vers 
T adresse specifiee. Elle contient un parametre correspondant a l'identiriant du champ de 
saisie, dont la valeur est le texte saisi. La reponse de la requete contient le contenu HTML 
de la completion a afficher dans une zone qui apparait alors. Elle doit correspondre a une 
liste formatee de la maniere suivante : 

<ul> 

<li>Premier resul tat</l i> 

<li>Second resul tat</l i > 
</ul> 
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Avec cette approche, les options et fonctions de rappel recapitulees aux tableaux 10.18 et 
10.19 peuvent etre utilisees. 

Tableau 10.18 Options du constructeur de la classe Ajax.Autocompleter 



Option 


Valeur 


par 


defaut 


Description 


frequency 


0.4 






Frequence d'envoi de requetes Ajax 


indicator 


null 






Element a afficher lors de I'execution de la requete Ajax. Lelement est affiche avec I'effet 
Effect. show et masque avec Effect. hide. 


minChars 


2 






Nombre de caracteres a saisir avant que I'autocompletion ne fonctionne. 


paramName 


- 






Identifiant utilise lors de I'envoi de la requete Ajax 


tokens 


[] 






Liste de caracteres permettant de selectionner avec le clavier un element de la liste de 
completion 



Tableau 10.19 Fonctions de rappel du constructeur de la classe Ajax.Autocompleter 



Fonction de rappel 

afterUpdateElement 

updateElement 



Parametre Description 

La chaine saisie et I'element Cette methode est appelee apres la methode de mise a jour du champ 

selectionne dans la liste de de saisie a partir de I'element selectionne dans la liste de completion, 
completion 

Lelement selectionne dans Cette methode est appelee en lieu et place de celle fournie en natif, dont 

la liste de completion la responsabilite est de mettre a jour le champ de saisie a partir de I'ele- 
ment selectionne dans la liste de completion. 



Si nous reprenons l'exemple precedent, la structure de la zone de saisie est equivalente. 
Par contre, la configuration se fait desormais par l'intermediaire de la classe Ajax.Auto- 
completer : 

function initialiserO 

var options = {paramName: "value", minChars: 2}; 

new Ajax.Autocompletert "recherche" , 

"1 iste_recherche" , "/autocomplete" , options); 
} 
Event .observe (window, "load" .initialiser): 



En resume 



La bibliotheque script. aculo. us propose differentes fonctionnalites, dont la plus interes- 
sante consiste a ajouter des effets visuels dans une application Web. Ceux-ci conferent 
une plus grande convivialite a 1' application par l'intermediaire de notifications graphi- 
ques et d'affichages progressifs de zones et de resultats. 

script.aculo.us met en outre a disposition un cadre arm de mettre en oeuvre le glisser- 
deposer et des zones de saisie supportant Tautocompletion. 

Signalons que, de concert avec la bibliotheque prototype, script.aculo.us correspond a la 
fondation de la brique JavaScript du framework Ruby on Rails. 
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Conclusion 



Les bibliotheques decrites dans ce chapitre sont interessantes en ce qu'elles sont legeres 
et implemented des fonctionnalites restreintes. Cette simplicite n'empeche pas qu'elles 
offrent une valeur ajoutee certaine aux applications Web en leur faisant profiter des fonc- 
tionnalites du Web 2.0. 

Les objectifs de ces bibliotheques sont de faciliter les developpements JavaScript en 
masquant certaines complexites du langage, d'ameliorer la structuration des applications 
en separant clairement les differentes preoccupations et d'offrir des composants et des 
effets graphiques elabores. 

Nous n'avons volontairement aborde que les principales bibliotheques JavaScript de ce 
type. Internet en fournit une multitude d'autres, interessantes a divers titres. 

Toutes ces bibliotheques legeres sont aussi adaptees aux applications Web classiques desirant 
enrichir leurs interfaces par des comportements du Web 2.0. 



11 



Support graphique 
de la bibliotheque dojo 



Nous avons vu a la partie II de l'ouvrage que la bibliotheque dojo offrait un cadre pour 
developper des applications JavaScript evoluees. Ce cadre permet de structurer et charger 
a la demande des modules. La bibliotheque se fonde sur ce mecanisme pour mettre a 
disposition des supports varies allant des collections aux techniques Ajax. 

Au-dela des modules decrits au chapitre 7, la bibliotheque dojo offre des fonctionnalites 
permettant de developper des applications graphiques. Ces fonctionnalites consistent en 
un ensemble de modules utilitaires facilitant la manipulation aussi bien de la structure 
des pages HTML a l'aide de la technologie DOM que de son aspect en se fondant sur CSS. 

La bibliotheque dojo integre en outre d'interessantes fonctionnalites arm de mettre en 
oeuvre de maniere optimale la gestion des evenements dans les pages Web. Ces evenements 
correspondent a ceux du DOM ainsi qu'a ceux declenches par des methodes d'objet. 

La bibliotheque dojo offre une couche d'abstraction au-dessus des specificites du naviga- 
teur ainsi qu'un cadre permettant de mettre en oeuvre et d'utiliser des composants graphi- 
ques. L'approche de la bibliotheque est mixte : elle permet de faire interagir finement les 
pages HTML avec les classes JavaScript des composants graphiques ainsi que leurs 
codes HTML et CSS tout en offrant la possibilite de manipuler ces composants par 
programmation. 
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Modules HTML de base 

La bibliotheque dojo met a disposition des modules de base afin de permettre notamment 
la manipulation des styles et la gestion des effets tout en integrant les specificites des 
differents navigate urs. 

Ces modules, qui sont en realite des sous-modules du module dojo . html , sont recapitules 
au tableau 11.1 

Tableau 11.1 Principaux modules relatifs au support HTML de dojo 



Module 




Description 


dojo.html 


color 


Permet de gerer les couleurs. 


dojo.html 


common 


Contient les fonctions HTML de base de dojo. 


dojo.html 


displ ay 


Contient les fonctions relatives a I'affichage 


dojo.html 


if rame 


Permet de gerer une iframe interne a une page HTML. 


dojo.html 


1 ayout 


Adresse le positionnement d'elements de pages HTML. 


dojo.html 


selection 


Contient les fonctions relatives a la selection d'elements HTML. 


dojo.html 


style 


Permet de gerer les styles d'elements HTML. 


dojo.html 


util 


Contient des fonctions utilitaires. 



Les principaux modules, a savoir dojo.html .common, dojo.html .style et dojo.html .display, 
sont detailles dans les sections suivantes. 



Fonctions de base 

dojo met a disposition diverses fonctions de base relatives a la technologie HTML par 
l'intermediaire du module dojo.html .common. Ann de les utiliser, ce module doit etre importe 
par l'intermediaire de la fonction dojo . requi re. 

Le tableau 1 1.2 recapitule les differentes fonctions de ce module. 
Tableau 1 1 .2 Fonctions de gestion des styles du module dojo.html.common 



Fonction 




Parametre 




Description 


dojo.html 


.getAttribute 


Un nceud et un nom 
but 


d'attri- 


Retourne la valeur d'un attribut d'un nceud. 


dojo.html 


.getCursorPosition 


Un evenement DOM 




Retourne la position du pointeur de la souris dans la page 
Web sans tenir compte du scroll. 


dojo.html 


.getEventTarget 


Un evenement DOM 




Determine le noeud a partir duquel a ete declenche un eve- 
nement. 


dojo.html 


.getParentByType 


Un nceud et un type 
de nceud 




Retourne le premier parent d'un nceud correspondant a un 
type donne. 


dojo.html 


.getScrol 1 


- 




Retourne la position du scroll de la page Web dans le 
navigateur. 
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Tableau 1 1 .2 Fonctions de gestion des styles du module dojo.html.common (suite) 



Fonction 


Parametre 


Description 


dojo.html .getViewport 


- 


Retourne les dimensions de la zone visible dans le navigateur. 


dojo.html .hasAttribute 


Un nceud et un nom d'attribut 


Determine si un attribut est present pour un noeud. 


dojo.html .isTag 


Un nosud et une liste 
de noms de balises 


Determine si un nceud correspond a un nom de balise 
d'une liste. 



Les fonctions dojo.html .getAttribute et dojo.html .hasAttribute donnent acces a des 
informations relatives aux attributs des noeuds DOM, la fonction dojo.html .isTag etant 
relative au type des balises. 

Nous allons detailler la mise en oeuvre de ces fonctions en nous fondant sur une balise di v 
decrite dans le code ci-dessous : 

|<div id="monDiv" unAttribut="Une valeur"> 
(...) 
</div> 

Les deux premieres fonctions permettent respectivement de retourner la valeur associee a un 
attribut et de determiner si un attribut est present pour un nceud. La fonction do jo . html . 1 sTag 
determine si un nceud correspond a un type contenu dans une liste passee en parametre. 

Le code suivant illustre la mise en ceuvre de ces differentes methodes : 

var noeud = dojo.byldC'monDiv" ) ; 

var unAttribut = ""; 

if( dojo.html .hasAttribut(noeud, "unAttribut") ) ( 

unAttribut = dojo.html .getAttribut(noeud, "unAttribut"); 
} 

var unAutreAttribut = ""; 

if( dojo.html .hasAttributtnoeud, "unAutreAttribut") ) { 
unAutreAttribut = dojo.html .getAttributtnoeud, 

"unAutreAttribut" ) ; 
} 
/* La variable unAttribut contient le contenu de 

1 'attribut unAttribut de la balise div tandis que la 

variable unAutreAttribut contient la chaine de caracteres 

vide */ 
var retour = dojo.html .isTag(noeud, "span", "div", "p"); 
/* La variable retour contient la valeur div puisqu'elle est de 

type div */ 

Notons que l'utilisation des fonctions dojo.html .hasAttribute et dojo.html .getAttribute 
pour des attributs relatifs a CSS n'est pas conseillee et que le module dojo.html .style 
doit etre mis en ceuvre a cet effet. 

Les fonctions do jo.html.getScrollet dojo. html, get ViewPort permettent de determiner 
respectivement l'origine du scroll et la taille de la zone affichee par le navigateur. 
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Le code suivant fournit un exemple de mise en oeuvre de ces fonctions : 

// Calcul de 1'origine du scroll (en haut et a gauche) 

var scroll = dojo.html .getScrol 1 () ; 

var scrollHaut = scroll. top; 

var scrollGauche = scroll. left; 

/* Les variables scrollHaut et scrollgauche correspondent aux 

coordonnees de 1'origine du scroll */ 
// Calcul des dimensions de la zone affichee par le navigateur 
var viewport = dojo.html .getViewport( ) ; 
var 1 argeurAffichage = viewport. width; 
var hauteurAffichage = viewport. height; 
/* Les variables 1 argeurAffichage et hauteurAffichage correspondent 

aux largeur et hauteur de la zone affichee */ 

La fonction dojo . html . getCursorPosi ti on determine les coordonnees du pointeur de la souris 
lors d'un evenement DOM, evenement passe en parametre de la fonction. Cette derniere 
est done a utiliser dans 1' implementation des observateurs d'evenements, comme l'indique 
le code suivant : 

function fonctionObservateur(evenement) { 

var pointeur = dojo.html .getCursorPosition(evenement) ; 

var pointeurX = pointeur. x; 

var pointeurY = pointeur. y; 

(...) 
} 



Gestion des styles 

dojo met a disposition diverses fonctions de gestion et de manipulation des styles CSS 
par l'intermediaire du module dojo.html .style. Ann de les utiliser, ce module doit etre 
importe par l'intermediaire de la fonction dojo.require. 

Le tableau 11.3 recapitule les differentes fonctions de ce module. 

Un ensemble de fonctions de ce module est relatif a 1' association de classes CSS avec des 
nceuds DOM. Ces fonctions se fondent sur les valeurs contenues dans leur attribut cl ass. 
Notons que cet attribut ne peut pas etre manipule avec les fonctionnalites standards de 
dojo relatives au DOM. 

Le code suivant donne un exemple de mise en oeuvre des fonctions dojo.html.getClasset 
dojo . html . hasCl ass afin de recuperer la valeur de l'attribut class d'un noeud DOM (repere O) 
et de verifier si un nom de classe est contenu dans cette valeur (repere ©) : 

Var monDiv = dojo.byldC'monDi v") ; 

/* Recuperation de la valeur de l'attribut class du naud 

d'identifiant monDiv */ 
var classe - dojo.html .getClass(monDiv) ; <-© 
/* Determination de la presence du nom de classe maClasse dans la 

valeur de l'attribut class du naud d'identifiant monDiv */ 
if( dojo.html .hasClasstmonDiv, "maClasse") ) {<-© 

(...) 
} 
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Tableau 1 1 .3 Fonctions de gestion des styles du module dojo.html.style 



Fonction 




Parametre 


dojo.html 


.addClass 


Un nceud et une classe CSS 


dojo.html 


. copyStyl e 


Un nceud d'origine et un 
nceud cible 


dojo.html 


.getClass 


Un nceud 


dojo.html 


.getClasses 


Un nceud 


dojo.html 


.getElementsByCl ass 


Une classe CSS, un nceud, 
un type de nceud, un type de 
correspondance et un dra- 
peau 



Description 

Permet d'ajouter une classe CSS a la fin de la liste des 
classes du nceud passe en parametre. 

Copie le style d'un nceud dans un autre. 

Retourne la valeur correspondent a I'attribut class du 
nceud passe en parametre. 

Retourne les classes CSS contenues dans I'attribut 
class du nceud passe en parametre. 

Retourne une liste de nceuds correspondant aux criteres 
passes en parametres. Ces criteres peuvent etre une 
classe CSS, un nceud parent de recherche, un type de 
correspondance ou un drapeau indiquant que XPath 
ne doit pas etre utilise. Les types de correspondances 
sont listes dans la structure dojo.html .class- 
MatchType : 

- Contai nsAl 1 : toutes les classes CSS sont associees 
au nceud. 

- Conta i nsAny : au moins une classe CSS est associee 
au nceud. 

- IsOnly : toutes les classes CSS sont associees au 
nceud et ce dernier n'en possede pas d'autres. 



dojo 
Name 


html 


.getElementsByCl ass- 


Une classe CSS, un nceud, 
un type de nceud, un type de 
correspondance et un drapeau 


Correspond a un synonyme de la fonction 
dojo.html .getElementsByCl ass. 


dojo 


html 


.getStyle 


Un nceud et un selecteur 
CSS 


Retourne la propriete d'un style pour un nceud. 


dojo 


html 


.getStyleProperty 


Un nceud et un selecteur CSS 


Retourne la valeur d'une propriete d'un style d'un nceud. 


dojo 


html 


.hasClass 


Un nceud et une classe CSS 


Determine si la valeur de I'attribut class du nceud 
passe en parametre contient une classe CSS. 


dojo 


html 


.prependClass 


Un nceud et une classe CSS 


Permet d'ajouter une classe CSS au debut de la liste 
des classes du nceud passe en parametre. 


dojo 


html 


. removed ass 


Un nceud, une classe CSS 
et un drapeau 


Supprime une classe CSS de la liste des classes CSS 
du nceud passe en parametre. Le drapeau specifie si 
le nom doit correspondre au nom exact d'une classe. 


dojo 


html 


. repl aceClass 


Un nceud, une classe CSS a 
remplacer et la nouvelle classe 


Remplace une classe CSS par une autre pour le 
nceud passe en parametre. 


dojo 


html 


.setClass 


Un nceud et une chaine de 
caracteres 


Positionne une chaine de caracteres en tant que valeur 
de I'attribut cl ass du nceud passe en parametre. 


dojo 


html 


.setStyle 


Un nceud, un selecteur CSS 
et une valeur 


Positionne la propriete d'un style pour un nceud. 



Les navigateurs Web ne prenant pas toujours bien en compte la modification des classes 
d'une balise, nous recommandons d'utiliser I'attribut styl e arin de modifier les proprietes 
du style d'un nceud DOM. 
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Comme le montre le code suivant, la fonction dojo.html .getElementsByClassName offre la 
possibility d'acceder a tous les elements de la page Web d'une classe CSS donnee : 

III Recuperation des balises associees a la classe CSS maClasse 
var balises = dojo.html .getElementsByClassName( "maCl asse") ; 
(...) 

Un autre ensemble de fonctions correspond a la specification de proprietes de styles pour des 
nceuds DOM. Ces fonctions se fondent sur les valeurs contenues dans leur attribut style. 

Le code suivant indique comment modifier la valeur d'une propriete d'un style (repere O) 
et copier le style d'un noeud dans un autre (repere ©) : 

var maBalise = dojo.byldC'maBal ise") ; 

var backgroundMaBal ise = dojo.html .getStyle(maBal ise, "background"); 

/* La variable backgroundMaBal ise contient la valeur de la 

propriete background du style de la balise */ 
// Modification de la valeur de la propriete background du style 
dojo.html .setStylednaBal ise, "background", "red");<-0 
/* Copie du style de la balise d'identifiant monAutreBal ise dans la 

balise d'identifiant maBalise */ 
var monAutreBal ise = dojo.byldC'monAutreBal ise") ; 
dojo.html . copyStyletmaBal ise, monAutreBal ise) ; 4-© 



Gestion de I'affichage 

dojo met a disposition diverses fonctions de gestion de I'affichage des elements d'une 
page Web par l'intermediaire du module dojo.html .display. Afin de les utiliser, ce module 
doit etre importe par l'intermediaire de la fonction dojo. requi re. 

Le tableau 1 1 .4 recapitule les differentes fonctions de ce module. 
Tableau 1 1 .4 Fonctions de gestion des styles du module dojo.html.display 



Fonction 




Parametre 


Description 


dojo.html 


.clearOpacity 


Un noeud 


Reinitialise I'opacite d'un nceud afin de le rendre opaque. 


dojo.html 


.getOpacity 


Un noeud 


Retourne la valeur d'opacite pour un nceud. 


dojo.html 


.hide 


Un noeud 


Masque un noeud dans la page Web. 


dojo.html 


.isDispl ayed 


Un noeud 


Retourne true si la valeur de la propriete di spl ay du style du noeud est dif- 
ferente de none. Dans le cas contraire, la valeur f al se est renvoyee. 


dojo.html 


. isShowing 


Un noeud 


Determine si un noeud est affiche dans la page Web. 


dojo.html 


.isVisible 


Un noeud 


Retourne true si la valeur de la propriete vi s i bl e du style du nceud est 
differente de hi dden. Dans le cas contraire, la valeur f al se est renvoyee. 



dojo.html . setDi spl ay 



Un noeud et une Positionne la valeur de la propriete display du style du noeud. Notons 

chaine decaracteres que la fonction accepte en parametre aussi bien une chaine de caracte- 
ou un booleen res qu'un booleen. Dans le cas d'une chaine de caracteres, le parame- 

tre est positionne en tant que valeur. Dans le cas du booleen true, la 
fonction determine la valeur a utiliser pour le nceud. Si la valeur est 
omise, la valeur none est positionnee. 
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Tableau 1 1 .4 Fonctions de gestion des styles du module dojo.html.display (suite) 



Fonction 




Parametre 


dojo.html 


.setOpacity 


Un nceud 
et un nombre 


dojo.html 


.setShowing 


Un nceud 
et un drapeau 


dojo.html 


setVisibility 


Un nceud et une 
chaine de caracteres 
ou un booleen 


dojo.html 


.show 


Un nceud 


dojo.html 


toggleDi splay 


Un nceud 



dojo. html. toggleShowing Un nceud 



dojo.html .toggleVisibi- 

lity 



Un nceud 



Description 

Positionne une valeur d'opacite pour un nceud. Les valeurs possibles 
sont comprises entre 0.0 et 1 .0, qui correspondent respectivement a un 
affichage transparent et a un affichage opaque. 

Appelle la fonction dojo.html .showou dojo.html .hide en se fondant 
sur un drapeau. 

Positionne la valeur de la propriete display du style du nceud. La fonc- 
tion accepte en parametre aussi bien une chaine de caracteres qu'un 
booleen. Dans le cas d'une chaine de caracteres, le parametre est posi- 
tionne en tant que valeur. Dans le cas d'un booleen, la fonction utilise la 
valeur visible pour la valeur true et hidden pour la valeur false. 

Affiche un nceud dans la page Web. 

Inverse la valeur d'affichage du nceud en se fondant sur la propriete 
di spl ay du style du nceud. 

Inverse le mode d'affichage d'un nceud dans la page Web. S'il est affiche, 
il est masque, et inversement. 

Inverse la valeur d'affichage du nceud en se fondant sur la propriete 
visibility du style du nceud. 



Les fonctions dojo.html .show et dojo.html .hide permettent respectivement d'afficher 
(repere O) et de masquer (repere ©) un nceud DOM dans une page Web, comme dans le 
code suivant : 



function afficherNoeud(identifiantNoeud) { 

var noeud = document. getElementByld(identifiantNoeud) ; 

dojo.html . show( noeud ) ; <-© 
} 
function masquerNoeud(identifiantNoeud) { 

var noeud = document. getElementByld(identifiantNoeud) ; 

dojo.html . hide (noeud ); <-© 
} 

Ce module offre la possibility de modifier l'opacite de l'affichage d'un nceud en se fondant 
sur les fonctions dojo.html .setOpacity et dojo.html .clear-Opacity, qui permettent respecti- 
vement de changer de niveau d'opacite et de retablir le niveau d'opacite par defaut. 

La mise en ceuvre des fonctions dojo.html .setOpacity (repere O) et dojo.html .clearOpacity 
(repere ©) se realise de la maniere suivante : 

function modifierOpaciteOdentifiantNoeud, opacite) { 

var noeud = document. getElementByld(identifiantNoeud) ; 

dojo.html .setOpacity (noeud, opacite) ; <-0 
} 
function retabl irOpacite(identifiantNoeud) { 

var noeud = document. getElementByld(identifiantNoeud) ; 

dojo.html .clearOpacity (noeud) ; <-© 
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Notons que les niveaux d'opacite vont de la valeur 1.0 pour un affichage opaque a la 
valeur 0.0 pour un affichage transparent. 

dojo offre la possibilite d'inverser l'etat d'affichage d'un nceud en se fondant sur les 
fonctions dont le nom debute par toggle. Le code suivant met en oeuvre la fonction 
dojo.html .toggleShowing afin de masquer un noeud affiche et inversement : 

function inverserAffichage(identifiantNoeud) ( 

var noeud = document .getElementByld(identifiantNoeud) ; 

dojo.html .toggleShowing (noeud) ; 
} 



Gestion des evenements 

A l'instar de la bibliotheque prototype, dojo fournit d'interessants mecanismes afin 
d'enregistrer et de desenregistrer des observateurs d'evenements et de les gerer. 

La bibliotheque dojo fournit cependant un support plus generique, car elle permet d'inter- 
cepter n'importe quel appel de methodes afin de declencher des traitements. Nous verrons 
par la suite que ce mecanisme est tres interessant pour traiter les evenements des compo- 
sants graphiques de dojo, evenements n'etant pas necessairement fondes sur le DOM. 

La mise en ceuvre des evenements est communement realisee apres l'initialisation de la 
page. Comme nous le verrons par la suite, la bibliotheque ne permet pas d'enregistrer des 
observateurs sur l'evenement load de la page. Ainsi, ces traitements doivent etre realises 
par 1' intermediate de la fonction dojo.addOnLoad. 



Traitements d'initialisation de la page 

Afin d'initialiser les composants graphiques, dojo ajoute automatiquement des traitements au chargement 
de la page (evenement 1 oad). De ce fait, la specification d'un observateur pour cet evenement ne peut etre 
utilisee puisqu'un seul observateur peut etre specifies pour l'evenement. dojo offre alors la possibilite 
d'ajouter des traitements au chargement de la page par le biais de la fonction dojo.addOnLoad. De 
maniere similaire, la fonction dojo . addOnUnl oad peut etre mise en oeuvre pour le dechargement de la page. 



Fonctions de base 

Les methodes de base du support des evenements sont localisees dans les modules iden- 
tifies par la chaine dojo . event . *, dont les differents elements doivent etre importes. 

Le support se fonde sur l'objet dojo. event, objet automatiquement instancie lorsque les 
modules relatifs aux evenements sont importes et offrant plusieurs methodes dont les 
principales sont connect et disconnect afin d'enregistrer et de desenregistrer des observa- 
teurs d'evenements. 

Ce support prend en charge aussi bien les evenements DOM que les evenements declenches 
suite a l'execution d'une methode d'un objet JavaScript. 
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Enregistrement d'observateurs d'evenements 

La methode de base connect permet d'enregistrer des observateurs d'evenements. Dans le 
support des evenements de dojo, un evenement ne correspond pas forcement a une action 
d'un utilisateur, c'est-a-dire a un evenement DOM. La bibliotheque permet egalement de 
voir l'appel d'une methode d'un objet comme un evenement, autorisant ainsi la definition 
des observateurs a ce niveau. 

Pour mettre en oeuvre un observateur permettant de detecter l'appel d'une methode d'un 
objet, la methode connect doit etre utilisee avec les parametres recapitules au tableau 11.5. 



Parametre 


Type 


srcFunc 


Une chaine de caracteres 


srcObj 


Un objet 


adviceFunc 


Une chaine de caracteres 


adviceObjet 


Un objet 



Tableau 11.5 Parametres de la methode connect 
dans le cas de I'observation d'une methode d'un objet 



Description 

Correspond au nom de la methode de I'objet precedent qui declenche I'evenement. 
Correspond a I'objet contenant la methode sur laquelle un observateur est enregistre. 
Correspond au nom de la methode de I'observateur qui traite I'evenement. 
Correspond a I'objet contenant la methode d'observation. 



Lutilisation de cette methode n'a aucun impact sur la mise en oeuvre des objets observes 
ni sur le nom de leurs methodes. 

Le code suivant fournit un exemple de mise en oeuvre de la methode connect afin d'enre- 
gistrer (repere ©) un observateur (repere ©) pour une methode d'un objet (repere O) : 

// Objet dont une methode est observee 
var monObjet = { <-0 

maMethode: functionO ( 
(...) 



// Objet d'observation 
var monObservateur = {<-© 

traiterEvenement: function^ 
(...) 



/* Enregistrement de I'observateur monObservateur sur 

1 'objet monObjet */ 
do jo. event, connect (monObjet, "maMethode" , <-© 

monObservateur, "traiterEvenement" ) ; 
monlnstance.maMethodet ) ; 
/* Apres l'appel de cette methode, la methode traiterEvenement 

de I'objet monObservateur est appelee */ 
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Ce mecanisme peut egalement etre mis en ceuvre pour une fonction a" observation qui n'est 
rattachee a aucun objet. Dans ce cas, la methode connect ne prend que les trois parametres 
recapitules au tableau 1 1 .6. 

Tableau 11 .6 Parametres de la methode connect dans le cas d'une fonction d'observation 

Parametre Type Description 

s re Func Une chaine de caracteres Correspond au nom de la methode de I'objet precedent qui declenche I'evenement. 

srcObj Un objet Correspond a I'objet contenant la methode sur laquelle un observateur est enregistre. 

advi ceFunc Une chaine de caracteres Correspond au nom de la fonction d'observation qui traite I'evenement. 

Dans le code suivant, la methode connect permet d'enregistrer (repere ©) une fonction 
d'observation (repere ©) pour une methode d'un objet (repere O) : 

var monObjet = { <-© 

maMethode: functionO { 

(...) 
} 
}; 
function traiterEvenement( ) {<-© 

(...) 
} 

do jo. event. connect (mon Instance, "maMethode" , 
"traiterEvenement" ) ; <-© 
monInstance.maMethode( ) ; 

/* Apres 1'appel de cette methode, la fonction traiterEvenement 
est appelee */ 

L'enregistrement d'observateurs pour des evenements DOM de nceuds se realise de la meme 
maniere que precedemment. Les premier et second parametres de la fonction do jo . event . connect 
correspondent desormais respectivement au noeud et au nom de I'evenement observe. 

No tons cependant qu'avec cette fonction, le nom de I'evenement doit etre pre fixe par on. 

Le code suivant donne un exemple de mise en oeuvre d'un observateur sur I'evenement 
oncl ick d'un nceud DOM d'identifiant monNoeud : 

var monObservateur - { 

traiterEvenement: functionO { 
(...) 

} 
}; 
function traiterEvenement( ) { 

(...) 
} 

var monNoeud = dojo.byldC'monNoeud") ; 
dojo. event. connect(monNoeud, "oncl ick" , 

monObservateur, "traiterEvenement") ; 
do jo. event. connect (mon Noeud, "oncl ick" , "traiterEvenement") ; 
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Notons que la methode connect offre un support afin de controler les enregistrements 
multiples de memes observateurs. Ces derniers ne sont enregistres qu'une seule fois par 
le biais de cette fonction. 

La bibliotheque dojo met egalement a disposition la methode kwConnect, qui se fonde sur 
un tableau associatif en tant que parametre. 

Le code suivant adapte les exemples precedents afin d'utiliser cette fonction (repere O) : 

// Objet dont une methode est observee 
var monlnstance = { 

maMethode: functionO ( 
(...) 



// Objet d'observation 
var monObservateur = ( 

traiterEvenement: functions 
(...) 



/* Enregistrement de 1 'observateur monObservateur sur 

1 'objet monObjet */ 
do jo. event. kwConnect ( { <-0 

srcObj: monlnstance, 

srcFunc: "maMethode", 

adviceObj: monObservateur, 

adviceFunc: "traiterEvenement" 
}); 

monlnstance.maMethodet ) ; 

/* Apres l'appel de cette methode, la methode traiterEvenement 
de 1 'objet monObservateur est appelee */ 

Desenregistrement d'observateurs d'evenements 

La bibliotheque dojo propose une maniere elegante pour supprimer les observateurs enregis- 
tres pour un evenement DOM ou une methode en se fondant sur la methode di sconnect. 

Afin de desenregistrer un observateur, cette methode doit etre appelee avec les memes 
parametres que ceux utilises lors de son enregistrement avec la methode connect. 

Le code suivant donne un exemple de desenregistrement (repere ©) d'un observateur 
(repere ©) d'une methode d'un objet (repere O), observateur precedemment enregistre 
en se fondant sur la methode connect (repere ©) : 

var monlnstance = {<-0 
maMethode: functionO ( 
(...) 
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var monObservateur - {<-© 

traiterEvenement: functionO 
(...) 



); 



do jo. event, connect (mon Instance, "maMethode" , <-© 

monObservateur, "traiterEvenement") ; 
monlnstance.maMethodet ) ; 
/* Apres 1'appel de cette methode, la methode traiterEvenement 

de 1'objet monObservateur est appelee */ 
do jo. event, disconnect (mon Instance, "maMethode" , <-© 

monObservateur, "traiterEvenement" ) ; 
monlnstance.maMethodet ) ; 
/* Apres 1'appel de cette methode, la methode traiterEvenement 

de 1'objet monObservateur n'est plus appelee */ 

Le desenregistrement d'evenements DOM se realise de la meme maniere en se fondant 
toujours sur la fonction dojo. event. disconnect. 



Decouplage 



La mise en oeuvre de la gestion des evenements dans une application JavaScript est un 
veritable defi si Ton desire bien separer les differents elements (HTML, CSS et JavaScript) 
contenus dans une page Web. 

La bibliotheque dojo met en ceuvre un mecanisme fonde sur les sujets (topics), qui permet de 
decoupler les declencheurs des observateurs d'evenements. La bibliotheque implemente a 
cet effet des canaux d'echanges d' informations, auxquels les observateurs s'enregistrent 
arm d'etre notifies lorsqu'un evenement est envoye sur un canal donne. 

La gestion et 1' utilisation de ces canaux recourent a 1'objet dojo . event . topi c instancie par 
dojo lors de l'inclusion des modules relatifs aux evenements (modules identifies par la 
chaine do jo. event.*). 

Le tableau 11.7 recapitule les methodes de cette instance. 

Tableau 1 1 .7 Methodes de I'objet dojo.event.topic 



Methode 


Parametre 


Description 


destroy 


Le nom du sujet 


Detruit un sujet a partir de son nom. 


getTopic 


Le nom du sujet 


Retourne I'objet representant un sujet a partir de son nom. L'objet 
retourne est de type do jo. event, topic. Topi clmpl. 


publ ish 


Le nom du sujet 


Envoie un message pour le sujet. 


registerPubl isher 


Le nom du sujet, I'objet et le nom 
de la methode declencheur 


Definit une methode d'un objet en tant que declencheur pour un 
sujet. Lorsque cette methode est appelee, un message est envoye 
pour le sujet. 


subscribe 


Le nom du sujet, I'objet et le nom 
de la methode de I'observateur 


Enregistre un observateur pour un sujet donne. 


unsubscribe 


Le nom du sujet, I'objet et le nom 
de la methode de I'observateur 


Desenregistre un observateur pour un sujet donne. 
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La bibliotheque dojo gere en interne les sujets en se fondant sur la classe 

dojo. event .topi c. Topi clmpl . 

Enregistrement d'observateurs a un sujet 

L'enregistrement d'observateurs se realise par 1' intermediate de la methode subscri be de 
l'objet dojo. event. topic. La methode des observateurs relative au traitement des evene- 
ments doit posseder un parametre afin de recevoir le message associe a l'evenement. Le 
type de ce parametre varie suivant l'evenement declenche. 

A l'instar de la methode connect de l'objet dojo. event, la methode subscribe supporte 
l'utilisation d'observateurs aussi bien sous forme de fonction que de methode d'objet. 

Le code suivant fournit un exemple de mise en oeuvre de cette methode (reperes ©) avec des 
observateurs implemented par une methode d'objet (repere O) et une fonction (repere ©) : 

var monObservateur = (<-0 

traiterEvenement: function(message) { 
(...) 



function traiterEvenement(message) {<-© 

(...) 
} 
dojo. event, topic, subscri be ("monSujet" , <-© 

monObservateur, "traiterEvenement") ; 
dojo. event, topic, subscri be ("monSujet" , "traiterEvenement" ) ; <-© 

Publication de messages sur un sujet 

La publication de messages peut etre mise en oeuvre de deux manieres. La premiere se 
fonde directement sur l'objet representant le sujet et sa methode sendMessage, tandis que la 
seconde consiste a configurer une methode d'un objet comme declencheur d'evenements. 

Le code suivant donne un exemple de mise en oeuvre de la premiere maniere d' envoy er 
un message sur le sujet monSujet : 

I var monSujet = dojo. event. topic. getTopic( "monSujet") ; 
monSujet. sendMessage ( "mon message") ; 

Dans ce cas, le message recu par les observateurs enregistres est une chaine de caracteres 
contenant « mon message ». Cette approche est intrusive, car elle impose une utilisation 
directe d'un objet de la bibliotheque dojo. 

Avec la seconde maniere, la methode registerPublisher de l'objet dojo. event. topic doit 
etre utilisee, comme le montre le code suivant : 

var monDeclencheur = { 

declencher: functionO { 
(...) 



do jo. event . topic. register Publisher ("monSujet" , 

monDeclencheur, "declencher"); 
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Un evenement est envoye pour le sujet monSujet lorsque la methode decl encher de l'objet 
monDeclencheur est appelee. Avec cette approche, le message recu par les observateurs 
enregistres pour le sujet est vide. 

Al'instar de la methode connect de l'objet do jo. event precedemment decrite, la methode 
registerPublisher peut etre mise en oeuvre arm d'utiliser des evenements DOM en tant 
que declencheur. 

Le code suivant envoie un message sur le sujet monSujet lorsque l'evenement onclick se 
produit sur un bouton : 

Ivar monBouton = dojo.byldC'inonBouton") ; 
do jo. event. topic. regis terPubl ishert "monSujet" , 
monBouton, "onclick"); 

Dans ce cas, le message recu par les observateurs enregistres correspond a l'evenement 
DOM qui se produit. 

Gestion des effets 

La bibliotheque dojo met a disposition le module dojo.lfx arm de mettre en oeuvre des 
effets visuels. Les effets supportes sont similaires a ceux fournis par la bibliotheque 
script.aculo.us (voir le chapitre 10). Leur nombre est cependant plus restreint. 

Le tableau 11.8 recapitule les differentes fonctions contenues dans ce module. 
Tableau 11 .8 Fonctions de gestion des effets du package dojo.lfx 

Fonction Parametre Description 

dojo.lfx. chain Les effets achainer Permetde realiser a lachaine divers effets. 

do j o . 1 f x . html . expl ode Le nceud de depart, le noeud a Permet d'afficher un element avec un effet d'explosion en 

afficher et la duree de I'effet partant d'un nceud. 

dojo.lfx.html .fade Un tableau d'elements, lesvaleurs Permet de modifier progressivement I'opacite afin de ren- 

de I'opacite au debut et a la fin dre transparent ou opaque un ou plusieurs elements, 
et la duree de I'effet 

dojo.lfx.html .fadeHide Un tableau d'elements Permetde masquer un element en modifiant progressive- 

et la duree de I'effet ment son opacite. 

dojo.lfx.html .fadeln Un tableau d'elements Permet de modifier progressivement I'opacite afin d'affi- 

et la duree de I'effet cher un element. 

do j o . 1 f x . html . f adeOut Un tableau d'elements Permet de modifier progressivement I'opacite afin de mas- 

et la duree de I'effet quer un element. 

dojo.lfx.html .fadeShow Un tableau d'elements Permet d'afficher un element en modifiant progressive- 

et la duree de I'effet ment son opacite. 

dojo.lfx.html .highlight Un tableau d'elements, une Permet de modifier le surlignement d'un element. Cette 

couleur au format RVB et la fonction permet de specifier la couleur de surlignement au 

duree de I'effet debut de I'effet. 

dojo.lfx.html .implode Le nceud a masquer, le nosud Correspond a I'inversede I'effet dojo.lfx. html .explode, 

d'arrivee et la duree de I'effet 
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Tableau 1 1 .8 Fonctions de gestion des effets du package dojo.lfx (suite) 



Fonction 






Parametre 


Description 


dojo.lfx 


html 


.si ideBy 


Un tableau d'elements, les 
coordonnees d'un deplacement 
et la duree de I'effet 


Permet de deplacer un nceud a une position relative a la 
position courante. Le deplacement est specifie en parametre. 


dojo.lfx 


html 


.si ideTo 


Un tableau d'elements, les 
coordonnees d'une position 
et la duree de I'effet 


Permet de deplacer un nceud a une position dont les coor- 
donnees sont specifies. 


dojo.lfx. 


html. 


unhighl ight 


Un tableau d'elements, 
une couleur au format RVB 
et la duree de I'effet 


Permet de modifier le surlignement d'un element. Cette 
fonction permet de specifier la couleur de surlignement a 
la fin de I'effet. 


dojo.lfx 


html 


.wipe In 


Un tableau d'elements 
et la duree de I'effet 


Permet de derouler un element afin de I'afficher. 


dojo.lfx 


html 


. wipeOut 


Un tableau d'elements 
et la duree de I'effet 


Permet d'enrouler un element afin de le masquer. 



Les fonctions decrites au tableau 1 1.8 permettent de creer I'effet mais ne l'executent pas. 
Afin de jouer les effets, il faut recourir a la methode pi ay. 

La fonction dojo . 1 fx. html . fade permet de realiser un effet modifiant l'opacite d'un element 
d'une valeur initiale a une valeur finale. 

Le code suivant se fonde sur cette fonction (repere O) pour faire disparaitre le texte : 

<html> 
<head> 
(...) 

<script type="text/javascript"> 
dojo.requi re( "dojo.lfx.*" ) ; 
</script> 

<script type="text/javascript"> 
function executerEffet( ) { 

var monTexte = dojo.byId( "monTexte") ; 
dojo.lfx.html .fade ([monTexte] , <-0 

{start: 1.0, end: 0.0}, 1500) .play( ) ; 
) 
</script> 
</head> 
<body> 

<p id="monTexte">Un exemple de texte</p> 

<a href="javascript:executerEffet( )"> 

Realisation de 1 'effet. </a> 
</body> 
</html> 

Les fonctions dojo.lfx.html .highlight et dojo.lfx.html .unhighl ight permettent de gerer 
la mise en surbrillance d'elements. 
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Le code suivant donne un exemple de mise en oeuvre de cette derniere fonction (repere O) 
afin de realiser un effet de mise en surbrillance du texte avec la couleur de code (230, 
230, 180) : 

<html> 
<head> 
(...) 

<script type="text/javascript"> 
do jo. requireC'dojo.l fx.*" ) ; 
</script> 

<script type="text/javascript"> 
function executerEffett) { 

var monTexte = dojo.byldC'monTexte" ) ; 
dojo.lfx.html .unhighl ight( monTexte, <-0 

[230, 230, 180], 1500).play(); 
} 
</script> 
</head> 
<body> 

<p id="monTexte">Un exemple de texte</p> 

<a href =" javascript: executerEffett )"> 

Realisation de l'effet.</a> 
</body> 
</html> 

Les fonctions dojo.lfx.html .wipeln et dojo.lfx.html .wipeOut permettent respectivement 
de derouler et d'enrouler des elements. 

Le code suivant utilise cette derniere (repere O) afin de masquer le texte en se fondant sur 
un effet d'enroulement : 

<html> 
<head> 
(...) 

<script type="text/javascript"> 
do jo. requireC'dojo.l fx.*" ) ; 
</script> 

<script type="text/javascript"> 
function executerEffett) { 

var monTexte = dojo.byldC'monTexte"); 
dojo.lfx.html .wipe0ut( monTexte, 1500) .playO ;<-© 
} 
</script> 
</head> 
<body> 

<p id="monTexte">Un exemple de texte</p> 

<a href =" javascript: realiserEffett )"> 

Realisation de 1 'effet. </a> 
</body> 
</html> 
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Gestion du glisser-deposer 

Pour mettre en ceuvre la fonctionnalite de glisser-deposer, ou drag-and-drop, la biblio- 
theque dojo fournit les classes dojo.dnd.HtmlDragSource et dojo.dnd.HtmlDropTarget. 

Ces classes permettent respectivement de definir les elements graphiques pouvant etre 
deplaces et ceux correspondant aux cibles de cette operation. 

Nous allons reprendre l'exemple de mise en oeuvre de ce mecanisme detaille au chapi- 
tre 10 afin de l'adapter a ces deux classes. Le code HTML suivant rappelle les differents 
elements mis en ceuvre par le glisser-deposer : 

<img id="produitl" class="produits" 

src="images/product-l" alt="tasse" /><-© 
<img id="produit2" cl ass="produits" 

src="images/product-2" al t="t-shi rt" /><-© 
<div id="caddy" cl ass="caddy"> 

<img src="images/deposer-ici " alt="" /><-© 
<di v id="texte_caddy">Deposer les elements desires ici.</div> 
</div> 

Les reperes decrivent respectivement les images d'une tasse (O), d'un t-shirt (©) et d'une 
fleche (©). Differents comportements sont appliques aux images precedentes par l'inter- 
mediaire du code suivant : 

function initialiser^ ) 

var imageTasse = dojo.byldC'produitl" ) ; 

new dojo. dnd. Html DragSourcetimageTasse, "groupe" ) ; <-© 

var imageTshirt = dojo.byId( "produit2" ) ; 

new dojo. dnd. Html DragSourcetimageTshi rt, "groupe" ); <-© 

var imageFleche = dojo.byldC'caddy") ; 

new dojo. dnd. Html DragTargettimageFleche, [ "groupe" ]);<-© 
} 
dojo. addOnLoad( initial iser) ; 

Tout d'abord, par l'intermediaire du constructeur de la classe dojo.dnd.HtmlDragSource 
(reperes ©), les deux premieres images deviennent des elements pouvant etre deplaces. 
En outre, le constructeur de la classe dojo. dnd. HtmlDragTarget (repere ©) definit qu'ils 
peuvent etre deposes dans la zone d'identifiant caddy, identifiee par la fleche. 

Les deux types d'elements sont relies par Fidentifiant groupe. Ce dernier est specifie au niveau 
des constructeurs des classes dojo.dnd.HtmlDragSource et dojo. dnd. HtmlDragTarget. Notons 
que le constructeur de cette derniere peut prendre en parametre plusieurs identifiants. 



Implementation des composants graphiques 

La plupart des bibliotheques adressant les problematiques graphiques des applications 
offrent un cadre permettant de structurer les composants graphiques. Nous avons detaille 
cet aspect au chapitre 9, dedie a la mise en oeuvre de composants graphiques. 

La bibliotheque dojo offre d'interessants mecanismes afin de structurer, d'implementer 
et d'utiliser des composants graphiques. 
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Structuration des composants graphiques 

Les composants graphiques de dojo sont implemented en se fondant sur le concept de 
module decrit au chapitre 7. Chaque composant graphique correspond done a un module, 
ce dernier mettant a disposition une ou plusieurs classes JavaScript. 

Un composant graphique se compose, dans la bibliotheque dojo, de trois elements, comme 
illustre a la figure 11.1. 
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Figure 11.1 

Elements constitutifs d'un composant graphique dans dojo 

Detaillons maintenant les differentes specificites de ces elements. 



Classe JavaScript 

La classe JavaScript du composant graphique correspond a sa partie centrale. Elle permet 
de definir les traitements relatifs a sa construction et a son fonctionnement. Elle contient 
egalement diverses proprietes du composant. 

Comme dojo met en oeuvre la programmation orientee objet afin de definir les composants 
graphiques, un composant est implemente par une classe qui se fonde sur diverses classes 
generiques de base. 

Le tableau 11.9 recapitule ces differentes classes de base ainsi que leurs fonctionnalites. 

La figure 11.2 illustre les relations d'heritage entre les classes decrites ci-dessus ainsi que 
leurs differentes proprietes et methodes. 
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Tableau 11 .9 Classes de base des composants graphiques de dojo 



Classe 

do jo. widget .DomWidget 

do jo. widget. Html Widget 
dojo. widget .Widget 



Description 

Correspond a la specialisation de la classe do j o . wi dget . Wi dget afin de prendre en compte les 
mecanismes de la technologie DOM. 

Correspond a la specialisation de la classe do jo. widget. Html Widget afin de prendre en 
compte les aspects des composants fondes sur le HTML, tels que I'affichage, le redimensionne- 
ment et les liaisons aux templates HTML et CSS. 

Correspond a la classe de base de tous les composants. Classe la plus generique, elle met en 
ceuvre les differents traitements du cycle de construction et de destruction des composants. Elle 
met egalement a disposition diverses methodes afin de manipuler des proprietes des compo- 
sants ainsi que de gerer leur redimensionnement et leur relation avec les autres composants. 



Widget 




-parent 




-isTopLevel 




-isModal 




-isEnabled 
-isHidden 








-isContainer 








HtmlWidget 








-widgetid 
-widgetType 




DomWidget 




-widgetType 

-templateCssPath 

-templatePath 


-templateNode 
-templateString 


+toString() 


+repr() 




-templateCssString 




-toggle 


+enable() 




-preventClobber 




-toggleDuration 


+disable() 

+hide() 

+show() 




-domNode 
-containerNode 




-animationlnProgress 


+initialize() 
+postMixlnProperties() 


+addChild() 


+onResized() 




+addWidgetAsDirectChild() 




+getContainerHeight() 


+notifyChildrenOfResize() 




+registerChild() 




+getContainerWidth() 


+create() 
+destroy() 


A 


+removeChild() 


y\_ 


+setNativeHeight() 
+createNodesFromText() 


\t 


+getFragNodeRef() 


xj 


+destroyChildren() 




+postlnitialize() 




+destroyRendering() 


+getChildrenOfType() 




+buildRendering() 




+isShowing() 


+getDescendants() 




+buildFromTemplate() 




+toggleShowing() 


+satisfyPropertySets() 




+attachTemplateNodes() 




+show() 


+mixlnProperties() 




+filllnTemplate() 




+onShow() 


+postMixlnProperties() 




+destroyRendering() 




+hide() 


+initialize() 




+cleanUp() 




+onHide() 


+postlnitialize() 




+getContainerHeight() 




+checkSize() 


+postCreate() 




+getContainerWidth() 




+resizeTo() 


+uninitialize() 

+buildRendering() 

+destroyRendering() 




+createNodesFromText() 




+resizeSoon() 
+onResized() 












+cleanUp() 




+addedTo() 




+addChild() 




+removeChild() 


Figure 11.2 
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Notons que cette figure a ete allegee en omettant les methodes de recuperation et de posi- 
tionnement des proprietes graphiques. 

En se fondant sur ces classes, la bibliotheque dojo met en oeuvre un cycle de traitements 
afin d' initialiser, de construire et d'afficher un composant graphique. 

La figure 11.3 illustre les appels successifs des differentes methodes des classes de base 
des composants. 
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Figure 11.3 

Traitements a" initialisation des composants graphiques de dojo 



Le tableau 11.10 detaille les differents traitements realises par les methodes du cycle de 
gestion de la construction d'un composant. Certaines de ces methodes peuvent etre 
surchargees dans les implementations des composants graphiques afin de realiser des 
traitements d' initialisation et de construction specifiques. 
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Tableau 11.10 Methodes mises en oeuvre dans la creation d'un composant graphique 



Methode Description 

bui 1 dRenderi ng Construit I'affichage du composant graphique. Methode de base de ces traitements, elle peut even- 

tuellement se fonder sur la methode fill InTemplate que les implementations des composants 
peuvent eventuellement surcharger. 

f i 1 1 InTempl ate Permet de specifier des traitements a realiser en se fondant sur le template specifie. Cette methode 

peut etre surchargee lors de ('implementation d'un composant. 

initialize Peut etre surchargee lors de I'implementation d'un composant afin de realiser ses traitements d'initiali- 

sation. 

mixInProperti es Permet de combiner les proprietes existantes du composant avec celles specifiers lors de sa creation. 

postCreate Permet de realiser des traitements apres la creation du composant graphique. Cette methode peut 

notamment etre surchargee lors de I'implementation d'un composant afin notamment d'enregistrer 
des observateurs pour des evenements. 

postlnitialize Permet de mettre en ceuvre des traitements specifiques a un composant apres son initialisation 

generate. 

postMixInProperties Peut etre surchargee lors de I'implementation d'un composant afin de realiser ses traitements suite 
a la methode mixInProperties. 

sati sfyPropertySets Permet d'initialiser les proprietes par defaut du composant. 



Comme pour la creation, la bibliotheque dojo met en oeuvre un cycle de traitements afin 
de detruire un composant graphique. 

La figure 11.4 illustre les appels successifs des differentes methodes des classes de base 
des composants. 
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Figure 11.4 

Traitements de destruction des composants graphiques de dojo 
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Le tableau 11.11 detaille les differents traitements realises par les methodes du cycle de 
gestion de la destruction d'un composant. 

Tableau 11.11 Methodes mises en oeuvre dans la destruction d'un composant graphique 

Methode Parametre Description 

destroyChildren - Permet de detruire tous les sous-composants du composant graphique. 

destroyRenderi ng Un booleen Permet de detruire I'affichage du composant graphique si le parametre specifie que les 

ressources correspondant a I'affichage doivent etre liberees. 

uni initialize - Permet de realiser les traitements de finalisation du composant graphique. 



Notons, pour finir, qu'afin de faciliter 1' implementation de la classe JavaScript des 
composants JavaScript, la bibliotheque met a disposition lafonction do jo. widget, define - 
Widget. Le principal objectif de cette fonction est de masquer l'utilisation du support de la 
programmation objet ainsi que l'enregistrement du composant graphique dans le gestionnaire 
de composants de dojo. 

Le code suivant fournit un exemple d' utilisation de cette fonction arin d'implementer le 
composant graphique dojo.widget.html .Button : 

do jo . wi dget . def i neWi dget ( 

"dojo.widget.html .Button" , <-0 
dojo. widget. Html Widget, <-© 
{<-© 

isContainer: true, 

caption: "", 

disabled: false, 

tempi atePath: dojo.uri .dojoUri ( 

"src/wi dget /templates /Html ButtonTemplate.html ") , 
tempi ateCssPath: dojo.uri .dojoUri ( 

" src/wi dget /templates /Html ButtonTempl ate. ess") , 
(...) 

fill InTemplate: functiontargs, frag){ 
(...) 



(...) 



)); 



La fonction do jo. widget, def ineWi dget permet de specifier le nom de la classe du composant 
(repere O), sa classe mere (repere ©) ainsi que ses divers attributs et methodes (repere ©). 

Template HTML 

La classe JavaScript du composant graphique doit etre combinee avec un fichier de repre- 
sentation graphique, ce dernier permettant de definir la structure HTML du composant. 

Ce fichier doit etre relie a la classe JavaScript par l'intermediaire de sa propriete tempi atePath. 



Support graphique de la bibliotheque dojo 



Chapitre 1 1 

Le code suivant donne un exemple de mise en oeuvre de ce mecanisme en se fondant sur 
lafonction dojo.uri .dojoUri (repere O) afin de specifier le chemin du fichier : 

dojo.widget.defineWidget( 

"dojo. widget. MonComposant" , 
dojo. widget. HtmlWidget, { 
(...) 
this. tempi atePath = dojo.uri .dojoUri ( <-© 

"src/wi dget / tempi ates/monTempl ate. html ") ; 
(...) 
}); 

dojo offre la possibilite de faire interagir la classe avec ce template de maniere simple par 
le biais d'attributs speciaux dans les balises HTML. 

Tout d'abord, l'attribut dojoAttachPoint permet de relier automatiquement le noeud DOM 
d'une balise HTML a une propriete de la classe JavaScript du composant. 

Le code suivant montre comment mettre en ceuvre cet attribut (repere O) dans le template : 

(...) 

<div dojoAttachPoint="monAttribut"><-0 

(...) 
</div> 
(...) 

La propriete monAttribut de la classe du composant correspondant au template ci-dessus 
contient alors une instance du nceud DOM de la balise di v. 

L'attribut dojoAttachEvent permet de specifier des methodes de la classe JavaScript du 
composant en tant qu'observateurs d'evenements DOM de balises du template. La speci- 
fication d'observateurs de plusieurs evenements se realise simplement en se fondant sur 
un seul attribut de ce type. 

Le code suivant montre comment mettre en oeuvre l'attribut dojoAttachEvent (reperes O) 
dans le template HTML : 

(...) 

<div dojoAttachEvent="oncl ick: traiterEvenementl"><-© 

(...) 
</div> 
(...) 
<div dojoAttachEvent="oncl ick, onmouseover: traiterEvenement2"><-© 

(...) 
</div> 
(...) 

La bibliotheque dojo offre egalement la possibilite d'utiliser les proprietes de la classe 
JavaScript du composant dans le template correspondant. 

Le code suivant decrit le template de la classe dojo.widget.html .HtmlCheckBox, template 
utilisant les proprietes tablndex (repere O), disabledStr (repere©), name (repere©) et 
checked (repere O) de cette classe : 
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<a cl ass='dojoHtmlCheckbox' 

tablndex="$(this.tablndex}"<-© 
href="#" ${this.disabledStr}<-© 
dojoAttachEvent="onCl ick; key Press" 
wai Role="checkbox"> 

<input type="checkbox" 

name="${ this, name} "<-© 
checked="$ {this, checked }"<-© 
style="display: none" 
dojoAttachPoint="inputNode"> 

  



</a> 

Les valeurs utilisees correspondent a celles des proprietes au moment de la construction 
du composant graphique. 

Fichier CSS 

Differents styles permettent de definir l'apparence du composant graphique. Ces styles 
doivent etre definis dans un fichier CSS specifique au composant. 

Ce fichier doit etre relie a la classe JavaScript par l'intermediaire de sa propriete 

tempi ateCssPath. 

Le code suivant donne un exemple de mise en oeuvre de ce mecanisme en se fondant sur 
lafonction dojo.uri .dojoUri (repere ©) afin de specifier le chemindu fichier : 

do j o . wi dget . def i neWi dget ( 

"dojo. widget. MonComposant" , 
dojo. widget. Html Widget, { 
(...) 
this.templateCssPath = dojo.uri .dojoUri ( <-© 

"src/wi dget / tempi ates/monTempl ate. html ") ; 
(...) 
}); 

Tous les mecanismes du langage CSS peuvent etre utilises afin de definir l'apparence du 
composant. 



Implementation d'un composant personnalise 

A la section precedente, nous avons decrit les classes de base des composants graphiques 
ainsi que leurs mecanismes generiques. Nous allons maintenant montrer comment se fonder 
sur ces classes pour mettre en oeuvre un composant graphique personnalise. 

Nous detaillons 1' implementation d'un composant graphique permettant de mettre en 
oeuvre des memos dans une page Web. Un memo correspond a une zone d'affichage de 
texte qui peut etre masquee. 

La figure 1 1.5 illustre 1' aspect du composant que nous allons developper. 
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Figure 11.5 

Aspect du composant graphique 
representant un memo 



Un titre 

Le texts du memo 



X 



Templates 

Avant de nous lancer dans le developpement du composant JavaScript, il nous faut concevoir 
1' aspect de notre composant graphique en nous fondant sur les langages HTML et CSS. 

Dans le code suivant decrivant la structure HTML du composant, le composant graphique 
comporte trois elements : le titre du memo (repere O), le bouton (repere ©) permettant 
de le fermer ainsi que son texte (repere ©) : 



<div class="memo"> 

<div class="titre">Un titre</div><-0 

<div class=" fermeture" >X</div><-© 

<di v cl ass="corps">Le texte du memo</div>< 

</div> 



© 



Le code ci-dessus se fonde sur les classes CSS titre pour la zone de titre, f ermeture pour 
le bouton de fermeture et corps pour le texte du memo. La classe memo adresse 1' aspect 
global du memo. 

Le code suivant decrit les differentes classes CSS utilisees : 

.memo { 

background: yellow; 

font-family: cursive; 

width: lOem; 
} 

.titre { 

font-weight: bold; 
text-decoration: underline; 
float: left; 



.fermeture { 

float: right; 
background: yellow; 
color: black 
font-size: x-small ; 
cursor:pointer; 



.corps ( 

clear:both; 
font-style: italic; 
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Maintenant que nous avons mis en oeuvre la structure du composant, nous pouvons creer 
sa classe JavaScript et l'associer aux templates HTML et CSS. 

Classe JavaScript 

La fonction dojo.widget.defineWidget doit etre mise en ceuvre arm de definir la classe 
JavaScript du composant graphique. Elle prend en parametres le nom de la classe, sa 
classe mere ainsi que ses attributs et methodes. 

Les attributs tempi atePath et tempi ateCssPath permettent de relier les templates crees a la 
section precedente avec la classe JavaScript. Notons que nous stockons ces fichiers dans 
le repertoire src/widget/templates de la distribution de dojo et que ces fichiers sont 
respectivement nommes Memo.html et Memo.css. 

Le code suivant donne un exemple de mise en oeuvre du squelette de la classe JavaScript 
du composant graphique : 

dojo.provide( "do jo. widget. Memo") ; 
dojo. requi re( "do jo. widget.*" ) ; 
dojo. requi re( " do j o. event .*") ; 
do jo . wi dget . def i neWi dget ( 

"dojo. widget. Memo" , 
dojo . wi dget . Html Wi dget , 
{ 

isContainer: true, 

tempi atePath: dojo.uri .dojoLIri ( 

"src/wi dget /tempi a tes /Memo. html " ) , 
tempi ateCssPath: dojo.uri .dojoUri ( 

"src/wi dget /tempi a tes /Memo. ess" ) 



) 



); 



Notons que cette classe doit etre definie dans le fichier Memo.js, localise dans le reper- 
toire sre/widget de la distribution de dojo. Le fichier doit specifier la classe mise a dispo- 
sition par 1' intermediate de la fonction dojo. provide ainsi que les modules a importer par 
lebiais de la fonction dojo. requi re. 

Comme le corps du memo peut contenir divers elements HTML, la propriete i sContai ner 
doit etre positionnee avec la valeur true. 

La bibliotheque dojo offre la possibilite de faire interagir le template HTML avec la 
classe JavaScript en attachant des elements et des evenements par Tintermediaire des 
attributs respectifs dojoAttachPoint et dojoAttachEvent. 

Comme les balises contenues dans la declaration doivent etre automatiquement ajoutees 
dans le corps du memo, la balise di v contenant le corps du memo doit etre reliee a l'atrribut 
containerNode (repere O) de la classe, comme dans le code suivant : 

<div class="memo"> 

<div class="titre">Un titre</div> 

<div class="fermeture">X</di v> 

<div class="corps"dojoAttachPoint="containerNode"X/div>4-© 
</div> 
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Le nom contai nerNode correspond a un attribut de la classe JavaScript de notre composant 
graphique, attribut herite de la classe dojo. widget. Html Widget. Cet attribut correspond au 
contenu du composant graphique lors de sa mise en oeuvre. 

Un evenement doit egalement etre ajoute afin de gerer le clic sur le bouton de fermeture. 
La methode fermerMemo de la classe JavaScript du composant doit etre reliee a 1' evene- 
ment cl ick de la balise div (repere O) correspondant a ce bouton, comme dans le code 
suivant : 

<div cl ass="memo"> 

<div cl ass="titre">Un titre</div> 

<div cl ass="fermeture" 

dojoAttachEvent="onCl ick: fermerMemo ">X</di v>«-© 

<di v cl ass=" corps" do joAtt a chPoint=" contai nerNode "></div> 
</div> 

Dans le code suivant, la methode fermerMemo (repere ©) doit etre ajoutee a la classe Java- 
Script afin de detruire le composant, ainsi qu'un attribut tit re (repere O) afin de stacker le 
titre specifie pour le memo : 

dojo.widget.defineWidget( 

"do jo. widget. Memo" , 
dojo . wi dget . Html Wi dget , 
{ 

isContainer: true, 
templatePath: dojo.uri .dojollri ( 

"src/wi dget /templates /Memo. html " ) , 
tempi ateCss Path: dojo.uri .dojollri ( 

"src/wi dget /tempi ates/Memo.css") , 
titre: "Titre par defaut",<-0 
fermerMemo: function(evenement) {<-© 
this.destroy( ) ; 



); 

Les attributs de la classe sont automatiquement initialises avec les attributs utilises lors 
de la mise en ceuvre du composant. 

La bibliotheque dojo offre egalement la possibility de parametrer le template HTML du 
composant avec les valeurs d' attributs de la classe. Ainsi, la valeur du titre du memo peut 
facilement etre utilisee (repere O) dans son template HTML, comme dans le code suivant : 

<div cl ass="memo"> 

<div class="titre">${tnis.titre)</div><-0 

<div cl ass="fermeture" 

dojoAttachEvent="onCl ick: fermerMemo ">X</div> 

<div cl ass="corps»dojoAtt a chPoint=" contai nerNode "></div> 
</div> 
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Utilisation du composant 

Ce composant peut etre mis en oeuvre dans une page HTML par 1' intermediate des fonc- 
tionnalites de la bibliotheque dojo, notamment en se fondant sur une balise HTML div 
conjointement utilisee avec l'attribut dojoType (repere ©), comme dans le code suivant : 

<html> 
<head> 

<title>Tests du composant graphique Memo</title> 
<script type="text/javascript"> 



djConfig 
</script> 
<script type= 
src=" 
<script type= 



isDebug: true 



"text/javascript" 
. ./. ./dojo. js"X/script> 
"text/javascript"> 
dojo. require ("do jo. widget. Memo") ; <-© 
</script> 
</head> 
<body> 

<div dojoType="memo" titre="Un titre"><-© 

Un texte de memo 
</div> 
</body> 
</html> 

La classe JavaScript du composant doit etre importee (repere O) avant de pouvoir etre 
utilisee. 

Nous allons maintenant detailler les mecanismes mis a disposition par dojo arin d'utiliser 
les composants graphiques dans une page HTML. 



Mise en oeuvre des composants 

dojo offre deux approches arin de mettre en oeuvre des composants graphiques dans une 
page Web, qui necessitent toutes deux l'importation du module (repere O) contenant le 
composant au debut de la page HTML, comme le montre le code suivant : 



<html> 
<head> 
(...) 
<script type="text/javascript"> 

var djConfig = { isDebug: true }; 
</script> 
<script type=" text/ javascript" 

src=" . ./ . ./dojo. js"X/script> 
<script type="text/javascript"> 

dojo. requireC'dojo.widget.MonComposantGraphique" ) 
(...) 
</script> 
(...) 
</head> 
(...) 
</html> 
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Les deux approches que nous allons etudier dans cette section se fondent implicitement 
sur la methode create des composants graphiques afin de les creer. Cette methode a ete 
decrite precedemment a la section « Structuration des composants graphiques ». 

Approche fondee sur le HTML 

La bibliotheque dojo offre la possibilite de specifier et charger des composants graphi- 
ques en se fondant sur la structure HTML de la page Web. 

Elle utilise pour cela l'attribut dojoType. Ce dernier n'a aucun sens au niveau du langage 
HTML mais est utilise par dojo lors de son parcours de l'arbre DOM de la page afin de 
creer les composants graphiques. Notons que la valeur de l'attribut dojoType peut omettre 
le terme do jo. widget dans les noms des composants graphiques utilises. 

Le code suivant donne une exemple de mise en oeuvre du composant graphique 
dojo. widget. Dialog en se fondant sur ce principe : 

<div dojoType="Dialog" id="fenetreSaisie" bgColor="white" 
bg0pacity="0.9" toggle="fade" toggleDuration="250"> 
(...) 
</div> 

dojo offre la possibilite de specifier des parametres d'initialisation aux composants 
graphiques en s'appuyant sur leurs attributs et un identifiant pour le composant avec 
l'attribut widgetld. 

Par defaut, dojo parcourt toutes les balises de la page afin de detecter et d'instancier les 
composants graphiques. Ce comportement peut neanmoins etre desactive par l'interme- 
diaire de la propriete parsewidgets de l'objet de configuration djConfig. Dans ce cas, sa 
valeur est false. 

La propriete searchlds peut conjointement etre utilisee afin de specifier les identifiants 
des noeuds des balises a prendre en compte en tant que composants graphiques de dojo. 

Le code suivant illustre ce principe : 

<html> 
<head> 
(...) 

<script type="text/javascript"> 
var djConfig = { 

parseWidgets: false,*-© 

searchlds: [ "conteneurComposants" , "monComposant"]<-© 
); 
</script> 
(...) 
</head> 
<body> 
(...) 
<di v id=" conteneurComposants "><-© 

<div dojoType="(. ..)">(.. . )</div><-0 
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</div> 

<di v id="monComposant"dojoType="( . . . )">( . . . )</div><-@ 
(...) 
</body> 
</html> 

Dans ce code, l'objet de configuration desactive la construction automatique des compo- 
sants graphiques fondee sur le HTML (repere O) tout en specifiant les identifiants de 
nceuds (repere ©) correspondant a des composants graphiques (reperes O) et a des nceuds 
pouvant en contenir (repere ©). 

Notons que cette deactivation peut ameliorer dans certains cas le temps de chargement 
des pages Web. 

Approche fondee sur la programmation 

La bibliotheque dojo offre la possibilite de specifier et charger des composants graphiques 
par programmation en se fondant sur la fonction dojo. widget. createWidget. 

Cette derniere prend en parametre le type du composant graphique, un tableau associatif 
contenant ses differentes proprietes et eventuellement un noeud auquel le composant doit 
etre lie. 

Le code suivant donne un exemple d'utilisation de la fonction dojo. widget. createWidget 
(repere O) : 

// Recuperation de la balise div de rattachement 
var monDiv - dojo.byldC'monDiv") ; 
// Creation du composant graphique 
var proprietes = { 

title: "Le titre de ma fenetre" 
}; 
var monComposant = dojo. widget. createWidget( <-© 

"FloatingPane" , proprietes, monDiv); 

Les composants peuvent ensuite etre relies entre eux par 1' intermediate de la methode 
addChild. Cette derniere prend en parametre un composant graphique et permet ainsi de 
gerer les composants imbriques en offrant la possibilite d'ajouter des sous-composants. 

Le code suivant decrit la facon d'utiliser la methode addChi 1 d (repere O) ann de relier les 
composants entre eux : 

// Recuperation de la balise div de rattachement 

var monDiv = dojo.byldC'monDiv"); 

// Creation du composant graphique racine 

var composantRacine = dojo. widget. createWidgett 

"LayoutContainer" , (}, monDiv); 
// Creation du composant graphique enfant 
var proprietes = ( 

layoutAlign: "left" 
}; 
var composantEnfant = dojo. widget. createWidgett 

"ContentPane" , proprietes); 
// Ajout du composant au composant racine 
compos antRacine.addChild( composant Enfant) ; <-© 
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Manipulation de composants graphiques 

Maintenant que nous avons indique la facon de definir des composants graphiques, nous 
pouvons detailler la maniere de les referencer afin de les manipuler et de leur associer des 
traitements. 

Utilisation du gestionnaire de composants 

La bibliotheque dojo se fonde sur l'objet dojo . wi dget . manager afin de stacker les composants 
graphiques. Cet objet est automatiquement instancie par le module do jo. widget. Manager. 

Le tableau 11.12 recapitule les principales methodes disponibles pour cet objet. 
Tableau 11.12 Principales methodes de l'objet dojo.widget.manager 



Methode 


Parametre 


Description 


add 


Une instance de composant 


Ajoute le composant graphique a la liste des composants du ges- 
tionnaire. 


destroyAl 1 


- 


Detruit tous les composants du gestionnaire. 


getAll Widgets 


- 


Retourne un tableau contenant tous les composants graphiques 
du gestionnaire. 


getlmplementation 


Un nom de composant, un 
objet a passer au construc- 
teur, un tableau associatif de 
proprietes et methodes ainsi 
qu'un espace de nommage 


Instancie un composant graphique apres avoir recupere son cons- 
tructeur en se fondant sur la methode getlmpl ementati onName. 


getlmplementationName 


Un nom de composant et un 
espace de nommage 


Retourne le constructeur d'un composant graphique a partir de 
son nom pour un espace de nommage. 


getWidgetByld 
et byld 


Un identifiant du composant 


Retournent I'instance d'un composant graphique pour un identi- 
fiant. 


getWidgetByNode 
et byNode 


Un nceud DOM 


Retournent le composant graphique du gestionnaire correspon- 
dent au nceud passe en parametre. 


getWi dget Package Li st 


- 


Retourne la liste des packages de composants graphiques enregis- 
tres. 


getWidgetsByFilter 
et byFilter 


Une fonction de filtrage et un 
drapeau 


Retournent un sous-ensemble de composants graphiques du ges- 
tionnaire en se fondant sur une fonction de filtrage. Si le drapeau 
contient la valeur true, seul le premier composant correspondant 
est retourne. 


getWidgetsByType 
et byType 


Un type de composant 


Retournent tous les composants graphiques d'un gestionnaire 
pour un type specifie. 


registerWidgetPackage 


Un nom de package 


Enregistre un nom en tant que package de composants graphi- 
ques. Le package do jo. widget est enregistre pardefaut. 


remove 


Un indice 


Detruit un composant graphique en se fondant sur son indice 
dans le tableau des composants du gestionnaire. 


removeByld 


Un identifiant du composant 


Detruit un composant graphique en se fondant sur son identifiant. 
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Ces methodes se fondent sur les proprietes widgets et widgetlds afin de stacker les 
composants graphiques, proprietes correspondant toutes deux a des tableaux. Notons 
egalement la presence de la propriete topWidgets correspondant a un tableau associatif et 
stockant les composants graphiques de plus haut niveau, c'est-a-dire sans parent. 

La plupart des methodes decrites au tableau 11.12 sont accessibles directement par le 
biais de methodes de l'objet dojo. widget. Ces methodes sont automatiquement executees 
dans le contexte du gestionnaire de composants, gestionnaire accessible par 1' intermediate 
de l'objet dojo. widget. manager. 

Le tableau 11.13 les recapitule en decrivant leur correspondance avec les methodes du 
gestionnaire de composants. 



Tableau 11.13 Principales methodes de l'objet dojo.widget relatives 
au gestionnaire de composants 



Fonction 

addWidget 

all 

destroyAllWidgets 

getlmplementation 

getlmplementationName 

getWidgetByld et byld 
getWidgetsBy Filter et byFil 
getWidgetsByType et by Type 
registerWidget Package 

removeWidget 
removeWidgetByld 



ter 



Description 

Correspond a la methode add de l'objet dojo. widget. manager. 

Correspond a la methode getAll Widgets de l'objet do jo. widget, manager. 

Correspond a la methode destroyAl 1 de l'objet dojo. widget. manager. 

Correspond a la methode getWidgetlmplementation de l'objet dojo. wid- 
get. manager. 

Correspond a la methode getWidgetlmplementationName de l'objet 
do jo. widget. manager. 

Correspondent a la methode getWidgetByld de l'objet dojo. widget. manager. 

Correspondent a la methode getWidgetsByType de l'objet dojo. widget. manager. 

Correspondent a la methode getWidgets By Type de l'objet do jo. widget, manager. 

Correspond a la methode registerWidgetPackage de l'objet dojo. wid- 
get. manager. 

Correspond a la methode remove de l'objet do jo. widget, manager. 

Correspond a la methode removeByld de l'objet dojo. widget. manager. 



Dans le code suivant, la methode addWidget (repere O) permet d'ajouter un composant au 
gestionnaire de composants : 

// Recuperation de la balise div de rattachement 
var monDiv = dojo.byldC'monDi v") ; 
// Creation du composant graphique 
var proprietes = { 

title: "Le titre de ma fenetre" 
}; 
var monComposant = dojo. widget. createWidget( 

"FloatingPane" , proprietes, monDiv); 
dojo. widget. addWidget(monComposant) ; <-© 
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Notons que l'utilisation explicite de cette fonction n'est pas necessaire puisque le compo- 
sant graphique a la responsabilite de s'enregistrer lui-meme aupres du gestionnaire de 
composants lors de sa creation. Inversement, il se desenregistre lors de sa suppression. 

Dans le code suivant, la methode by Id (repere O) permet de referencer un composant en 
se fondant sur son identifiant : 

III Reference le composant graphique d' identifiant « monComposant » 
var monComposant = dojo. widget. by Id( "monComposant") ; <-0 

Notons que cette fonction peut etre utilisee quelle que soit la maniere dont un composant 
a ete cree. 

D'autres methodes, telles que by Type et byFi 1 ter, permettent de recuperer un ensemble de 
composants. 

La premiere offre la possibility d' avoir acces a la liste des composants pour un type 
donne, comme dans le code suivant : 

I var typeComposant = "ContentPane" ; 
var composants = dojo. widget. byType(typeComposant) ; 

La seconde fonction retourne un element ou une liste d' elements en se fondant sur une 
fonction de filtrage passee en parametre. Le code suivant donne un exemple de la facon 
d'acceder au composant graphique relatif a un nceud DOM : 

// Un nceud de 1'arbre DOM 
var nceud = (...) 

// Definition de la fonction de filtrage 
var fonctionFil trage = function(composant) { 
if( composant. domNode == nceud ) { 
return true; 



// Appel de la fonction utilisant la fonction de filtrage 

var composantRelatif = dojo. widget. byFilter(fonctionFiltrage, true) ; 

Methodes et proprietes des composants 

Chaque composant offre deux proprietes en lecture seule afin d'acceder respectivement a 
la racine de 1'arbre DOM du composant, propriete domNode, ainsi qu'au noeud le conte- 
nant, propriete containerNode. 

Chaque composant dispose de diverses methodes permettant de controler son affichage, 
methodes recapitulees au tableau 11.14. 

Tableau 11.14 Methodes de gestion de I'affichage d'un composant graphique 

Methode Description 

hide Permet de masquer un composant graphique. 

isShowing Determine si un composant graphique est affiche. 

show Permet d'afficher un composant graphique. 

toggle Inverse le mode d'affichage d'un composant graphique. Si le composant est affiche, il est masque, et inversement. 
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Le code suivant donne un exemple d'utilisation des methodes show (repere©), hide 
(repere ©) et is Showing (reperes ©) pour un composant : 

// Recuperation de la balise div de rattachement 
var monDiv = dojo.byldC'monDi v") ; 
// Creation du composant graphique 
var proprietes = { 

title: "Le titre de ma fenetre" 
}; 
var monComposant = dojo. widget. createWidget( 

"FloatingPane" , proprietes, monDiv); 
// Affiche le composant 
monComposant.showt ) ; <-© 

var estAffiche = monComposant. isShowing( ); <-© 
// estAffiche contient true 
// Masque le composant 
monComposant. hi de( ) ; <-© 
estAffiche = monComposant. isShowing( ); <-© 
// estAffiche contient false 

Chaque composant met a disposition la methode destroy arm de se detruire ainsi que ses 
sous-composants de maniere recursive. Cette derniere desenregistre egalement le composant 
ainsi que ses sous-composants du gestionnaire de composants de la page Web. 

Le code suivant fournit un exemple de mise en ceuvre de cette methode (repere O) : 

// Recuperation de la balise div de rattachement 

var monDiv = dojo.byldC'monDiv") ; 

// Creation du composant graphique racine 

var composantRacine = dojo. widget. createWidgett 

"LayoutContainer" , {}, monDiv); 
// Creation du composant graphique enfant 
var proprietes = { 

layoutAlign: "left" 
}; 
var composantEnfant = dojo. widget. createWidgett 

"ContentPane" , proprietes); 
// Ajout du composant au composant racine 
compos antRacine.addChild( composant Enfant) ; 

/* Destruction de composantRacine et de son sous-composant (composantEnfant) */ 
composantRacine. destroy( ) ; <-© 



Gestion des evenements 

Comme le support des evenements de la bibliotheque offre la possibility d'enregistrer des 
observateurs sur l'execution de methodes d'objets, la fonction do jo. event, connect peut 
etre mise en oeuvre arm d'enregistrer des observateurs sur les evenements supportes par 
les composants graphiques. 

Les evenements DOM des differents constituants du composant graphique doivent etre 
traites uniquement en interne au composant, ce dernier ayant la responsabilite de le traiter. 
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L'utilisateur peut enregistrer neanmoins des observateurs sur les methodes appelees lors 
du traitement de l'evenement. 

Les methodes des composants graphiques sur lesquelles peuvent etre enregistres des 
observateurs sont communement prefixees par on. Les noms de ces methodes peuvent etre, 
par exemple, onShow, onHide ou onResized, methodes correspondant respectivement aux 
moments ou le composant est affiche, masque et redimensionne. 

Le code suivant detaille l'enregistrement d'un observateur (repere O) sur la selection d'un 
onglet en se fondant sur la methode onShow du composant : 

function traiterSelectionOnglett ) { 

// Traitement de l'evenement 

(...) 
} 

var monOnglet = dojo. widget. byld( "monOnglet") ; 
do jo. event, connect (monOnglet, "onShow" , ^-O 

"traiterSelectionOnglet") ; 

En resume 

La bibliotheque dojo offre d'interessants mecanismes afin de structurer et de mettre en 
oeuvre des composants graphiques dans des pages Web. Ces mecanismes tirent parti de la 
programmation orientee objet et utilisent les divers modules utilitaires graphiques mis a 
disposition par la bibliotheque. 

Un effort particulier a ete effectue afin de separer les differents constituants d'un compo- 
sant graphique. Les traitements sont rassembles dans une classe JavaScript tandis que la 
structure graphique est definie dans un fichier template HTML et l'apparence dans un 
fichier template CSS. 

dojo fournit egalement diverses fonctions afin de referencer et de manipuler des compo- 
sants graphiques. Cet aspect permet notamment de faire interagir leurs attributs et metho- 
des ainsi que d' enregistrer des observateurs d'evenements. 

dojo permet enfin de definir des composants graphiques personnalises en utilisant les meca- 
nismes presentes dans les sections precedentes. II met neanmoins a disposition un ensem- 
ble varie de composants graphiques, dont nous allons maintenant detailler les principaux. 

Composants predefinis 

Nous avons decrit a la section precedente le cadre offert par la bibliotheque dojo afin de 
structurer et mettre en oeuvre des composants graphiques. 

La bibliotheque met a disposition diverses implementations de la plupart des composants 
couramment utilises dans les applications Web. 

Lobjectif des sections suivantes est de decrire ces principaux composants graphiques, 
composants que nous avons regroupes par type. 
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Composants simples 

La bibliotheque dojo fournit divers composants elementaires afin de construire des ecrans 
et des formulaires de saisie. 

Le tableau 1 1.15 recapitule les principaux composants simples mis a disposition par dojo. 
Tableau 11.15 Composants graphiques simples 



Composant 




Description 


dojo. widget. Button 




Correspond a un bouton. 


dojo.widget.CheckBox 




Correspond a une case a cocher. 


dojo.widget.ComboBox 




Correspond a une liste de selection supportant I'autocompletion. 


dojo.widget.DatePicker 




Correspond a un calendrier evolue. 


do jo. widget. Dropdown DatePic 


ker 


Correspond au meme type de composant que DatePicker mais peut etre deplie suite 
a une action de I'utilisateur. 


do jo . wi dget . DropdownTi mePi c 


ker 


Correspond au meme type de composant que DropdownDatePicker mais pour les 
heures et minutes. 


dojo. widget. Select 




Correspond a une liste de selection. 



Le code suivant fournit un exemple de mise en oeuvre des composants do jo . wi dget . Button 
(repere©), dojo.widget.ComboBox (repere O) et dojo. widget. DropdownDatePicker (repere©) 
dans une page Web : 

<table border="0"> 
<tr> 

<td val ign="center">Editeur:</td> 
<td val ign="center"> 

<select name="editeur"dojoType="combobox"<-0 
style="width: 300px;"> 
<option value="Eyrolles">Eyrol les</option> 
(...) 
</select> 
</td> 
</tr> 
<tr> 

<td val ign="center">Date de parution:</td> 
<td val ign="center"> 

<div dojoType="dropdowndatepicker"<-© 
containerToggle="fade"X/div> 
</td> 
</tr> 
<tr> 

<td val ign="center" colspan="2"> 

<button dojoType=" Button ">Rechercher</button><-© 
</td> 
</tr> 
</table> 
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Le composant dojo.widget.ComboBox est beaucoup plus elabore que le composant 
dojo. widget. Select puisqu' il integre les mecanismes relatifs a V autocompletion, aussi bien 
locale que distante. 

La figure 11.6 illustre l'apparence des differents composants elementaires definis dans le 
code precedent. 



Figure 11.6 

Apparence des composants elementaires 
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Ann de gerer les donnees d'un formulaire a l'aide des techniques Ajax, la classe 
do j o . i o . FormBi nd peut etre mise en oeuvre. Elle permet d'envoyer simplement les donnees 
d'un formulaire par l'intermediaire d'une requete Ajax en se fondant sur le support de la 
fonction dojo. io. bind de la bibliotheque dojo. Cet envoi est realise lors d'un clic sur le 
bouton de soumission du formulaire. 

Les informations du formulaire sont utilisees en tant que parametres de la requete HTTP 
envoy ee en se fondant sur les techniques Ajax. 

Le constructeur de cette classe prend en parametre un tableau associatif contenant le 
nceud correspondant au formulaire ainsi qu'une methode de rappel permettant de realiser 
des traitements suite a la reception de la reponse de 1' envoi. 

Le code suivant indique comment mettre en oeuvre cette classe pour un formulaire 
d'identifiant monFormulaire : 

var sauvegardeFormulai re = new dojo.io. FormBind( { 
formNode: dojo.byldt "monFormul aire") , 
load: functiondoad, donnees, evenement) { 

/* Traitements a realiser suite a la reception de la 
reponse correspondant a 1 'envoi des donnees 
du formulaire */ 
(...) 
) 
}); 
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Positionnement 



La bibliotheque dojo offre divers composants graphiques afin de positionner des elements 
dans une page Web. Ces composants correspondant a des conteneurs pouvant contenir 
aussi bien des composants graphiques de dojo que du code HTML classique. 

Gestionnaire de positionnement 

Le gestionnaire de positionnement implements par le composant do jo. widget. Layout- 
Container offre la possibilite de definir des zones et de les positionner les unes par rapport 
aux autres. 

La figure 11.7 decrit le positionnement des zones mises en ceuvre par ce composant ainsi 
que leurs noms respectifs. 



Conteneur de zones 


Zone gauche 
(left) 


Zone superieure 
(top) 


Zone droite 
(right) 


Zone centrale 
(client) 


Zone inferieure 
(bottom) 



Figure 11.7 

Positionnement et noms respectifs des zones du gestionnaire 



Lentite elementaire representant une zone correspond au composant dojo. widget. Content- 
Pane. Ce dernier peut etre utilise avec ce gestionnaire de positionnement ou etre mis en 
oeuvre avec les composants decrits aux deux sections suivantes. 

Comme le montre le code suivant, le contenu de ce composant peut etre defini dans sa 
balise (repere O) ou faire reference a une page Web (repere ©) : 

(...) 

<div do joType=" Content Pane "><-© 

Le contenu de ma zone 
</div> 

<div do joType=" Content Pane" href=" contenuZone.html "></div><-© 
(...) 
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Les zones definies dans le gestionnaire de positionnement se fondent sur l'attribut 
1 ayoutAl 1 gn afin de definir leur position dans le gestionnaire. 

Le code suivant fournit un exemple de mise en oeuvre de ce gestionnaire de positionnement 
(repere O) ainsi que de ses differentes zones (reperes ©) : 

<div dojoType="l_ayoutContainer"<-0 
1 ayoutChildPriority=' left-right' 

style="border: 2px solid black; width: 100%; height: 300px; padding: 0px;"> 
<di v dojoType="ContentPane" layoutAl ign="top"<-© 

style="background-color: #b39b86; "> 
Zone du haut 
</div> 
<div dojoType="ContentPane" layoutAl ign="bottom"<-@ 

style=" background -col or: #b39b86; "> 
Zone en bas 
</div> 
<div dojoType="ContentPane" layoutAl i gn="1 eft" <— © 

style="background-color: #acb386; width: 100px;"> 
Zone a gauche 
</div> 
<div dojoType="ContentPane" layoutAl i gn=" ri ght" <— © 

style=" background -col or: #acb386; "> 
Zone a droite 
</div> 
<div dojoType="ContentPane" layoutAl ign="cl ient"<-© 

style="background-color: #f5ffbf; padding: 10px;"> 
Zone centrale 
</div> 
</div> 

Notons qu'il est possible d'associer des styles aux differentes zones en se fondant sur la 
technologie CSS et leur balise styl e. 

Gestionnaire de positionnement redimensionnable 

Le composant dojo.widget.Spl itContainer correspond a un autre type de gestionnaire de 
positionnement permettant de definir des zones redimensionnables. II peut etre mis en 
oeuvre en parallele du composant dojo. widget. LayoutContainer et se fonde sur le compo- 
sant dojo.widget.ContentPane afin de definir ses zones. 

La separation peut aussi bien etre verticale qu'horizontale. Cet aspect est configure par 
l'intermediaire de l'attribut orientation du composant. 

Le code suivant implemente un composant Spl itContainer (repere O) contenant deux 
zones redimensionnables (reperes ©) juxtaposees horizontalement (repere ©) : 

<div do joType=" Spl itContainer" <-© 
orientation=" horizontal " <-© 
sizerWidth="5" activeSizing="true" 

style="border: 2px solid black; float: left; width: 100%; height: 300px;"> 
<di v dojoType="ContentPane" sizeMin="20" sizeShare="20"><-© 

Definition de la zone de gauche 
</div> 
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<div dojoType="ContentPane" sizeMin="50" sizeShare="50"><-© 

Definition de la zone de droite 
</div> 
</div> 

Onglets 

La bibliotheque dojo offre egalement la possibilite de positionner des zones en se fondant 
sur des onglets, mecanisme implemente par le composant dojo. widget. TabContainer. 

Comme precedemment, il peut se fonder sur des composants de type dojo. widget. Content- 
Pane afin de deflnir le contenu de ses onglets mais egalement sur les gestionnaires decrits 
aux sections precedentes. 

Le code suivant donne un exemple de mise en ceuvre du composant do jo. widget. TabCon- 
tainer (repere O) arm de definir deux zones associees a des onglets (reperes ©) : 

<div id="mainTabContainer»dojoType="TabContainer"<-0 
style="width: 100%; height: 20em;" 
selectedTab="premierOnglet"> 
<div i d= "premierOnglet "do joType=" Content Pane" <-© 
1 abel="Premier onglet"> 
Contenu de la zone du premier onglet 
</div> 

<div i d= " secondOngl et" do joType=" Content Pane "<-© 
label="Second onglet"> 
Contenu de la zone du second onglet 
</div> 
</div> 

Notons la presence de la balise selectTab permettant de specifier l'onglet a afficher 
initialement. 

La figure 1 1.8 illustre l'apparence de la fenetre modale mise en ceuvre dans cette section. 



Premier ongiet I G«ond onglcl 



Conlwin dp la 7nflR (ti premier or^glet 



Figure 11.8 

Apparence d'un gestionnaire de positionnement fonde sur des onglets 

Fenetres 



La bibliotheque dojo permet la mise en ceuvre de diverses fenetres au sein des pages 
Web. Internes a ces pages, ces fenetres permettent d' afficher des informations au-dessus 
des elements presents. 
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dojo supporte deux types de fenetres, les fenetres modales et les fenetres flottantes. 

Fenetre modale 

Ce type de fenetre vient se positionner au-dessus et au centre du contenu de la page Web 
tout en empechant son utilisation. Le contenu peut neanmoins rester visible mais est non 
modifiable. 

La bibliotheque dojo met en oeuvre cette fonctionnalite en se fondant sur la classe 
dojo. widget. Dialog, dont l'utilisation s'appuie sur une balise div permettant de delimiter 
les elements qu'elle contient. 

Le tableau 11.16 recapitule les divers attributs supportes par cette classe. 
Tableau 11.16 Attributs de la classe dojo.widget.Dialog 

Attribut Description 

bgCol or Specifie la couleur avec laquelle est masque le contenu de la page. 

bgOpacity Specifie I'opacite utilisee pour masquer le contenu de la page, 

toggl e Specifie I'effet utilise pour afficher et masquer la fenetre. 

toggl eDurati on Specifie la duree de I'effet precedent. 

La mise en ceuvre d'une fenetre de ce type se realise de la maniere suivante en specifiant 
ses attributs (repere O) ainsi que son contenu (repere ©) : 

<!-- Definition de la fenetre et de ses attributs --> 

<div dojoType="Dialog" id="maFenetreModale" bgColor="white" 

bg0pacity="0.5" toggle="fade" toggleDuration="250"><-0 
<!-- Definition du contenu de la fenetre --> 
Cette zone est une fenetre modale contenant un formul aire. <-© 
<br/Xbr/> 

<form onsubmit="return false; "> 
<table> 
<tr> 

<td>Premier champ:</td> 
<td><input type="text"X/td> 
</tr> 
<tr> 

<td>Second champ:</td> 
<td><1nput type="text"X/td> 
</tr> 
</table> 
</form> 
Pour la fermer, cliquer 

<a href="javascript:void(0)" id="fermeture">ici</a>. 
</div> 
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Comme le montre le code suivant, l'affichage de la fenetre se realise par 1' intermediate 
de sa methode show (repere O) : 

function afficherFenetre( ) { 

var fenetre = dojo. widget. byldC'maFenetreModale" ) ; 

fenetre. show( ) ; <-© 
} 

La fermeture de la fenetre s'effectue en se fondant sur un noeud supportant l'evenement 
onclick, noeud specifie par lebiais de la methode setCloseControl. La fenetre s'enregistre 
automatiquement en tant qu'observateur de cet evenement, ce qui permet de la fermer. 

La specification du noeud pour fermer la fenetre d'identifiant maFenetreModale se realise 
de la maniere suivante en se fondant sur la methode setCl oseControl (repere O) : 

function initial iserFenetre( ) { 

var fenetre = dojo. widget. byldC'maFenetreModale" ) ; 

var fermeture = document .getElementById( "fermeture") ; 

fenetre. setCloseControl (fermeture) ; <-© 
} 
do jo. addOnl_oad( initial iser Fenetre) ; 

Notons que la methode hide du composant graphique peut egalement etre utilisee expli- 
citement a cet effet. 

La figure 1 1.9 illustre l'apparence de la fenetre modale mise en ceuvre dans cette section. 



Cette zone est une fenetre modale contenant un formulaire. 


Premier champ: 
Second champ: \ 


Pour la fermer, cliquer ici. 



Figure 11.9 

Apparence d'une fenetre modale 



Fenetre flottante 

Ce type de fenetre vient se positionner au-dessus de la page Web a une position souhaitee. 
Elle peut etre deplacee, eventuellement redimensionnee si elle le permet, et le contenu de 
la page Web reste visible et modifiable. 

La bibliotheque dojo met en oeuvre cette fonctionnalite en se fondant sur la classe 
dojo. widget. FloatingPage, dont l'utilisation recourt a une balise div permettant de delimiter 
les elements qu'elle contient. 
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Le tableau 11.17 recapitule les divers attributs supportes par cette classe. 
Tableau 11.17 Attributs de la classe dojo.widget.FloatingPage 



Attribut 

constrainToContainer 

displayCloseAction 

displayMaximizeAction 

displayMinimizeAction 

hasShadow 

iconSrc 

resizable 

title 



Description 



Specifie le parent auquel est rattachee la fenetre. Permet de mettre en ceuvre une sous-fenetre 
a I'interieur d'une autre fenetre. 

Specifie si une icone est affichee dans la barre de la fenetre pour la fermer. 

Specifie si une icone est affichee dans la barre de la fenetre pour I'agrandir. 

Specifie si une icone est affichee dans la barre de la fenetre pour la reduire. 

Specifie si la fenetre possede une ombre. 

Specifie le chemin de I'icone a afficher dans la barre de la fenetre. 

Specifie si la fenetre peut etre redimensionnee. 

Specifie le titre de la fenetre. 



La mise en oeuvre d'une fenetre de ce type se realise de la maniere suivante en speciriant 
ses attributs (repere O) ainsi que son contenu (repere ©) : 

<div dojoType="FloatingPane" id="maFenetreFlottante"<-0 
title="Fenetre flottante redimensionnable" 
constrainToContainer="true" 
has Shadow=" true" res i zabl e=" true" 
displayMinimizeAction="true" 
displayMaximizeAction="true" 
displayCloseAction="true" 
i conSrc=" images /note. gif " 

style="width: 350px; height: 210px; left: 600px;"> 
Cette zone est une fenetre flottante contenant un<-© 
formulaire.<br/Xbr/> 
<form onsubmit="return false;"> 
<table> 
<tr> 

<td style="font-family: Verdana, Helvetica, 

Garamond, sans-serif: font-size: 12px;"> 
Premier champ:</td> 
<td><input type="text"X/td> 
</tr> 
<tr> 

<td style="font-family: Verdana, Helvetica, 

Garamond, sans-serif; font-size: 12px;"> 
Second champ:</td> 
<td><input type="text"X/td> 
</tr> 
</table> 
</form> 
Pour la fermer, cliquer 

<a href="javascript:void(0)" id="fermeture">ici</a>. 
</div> 
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La figure 1 1.10 illustre l'apparence de la fenetre flottante mise en oeuvre dans cette section. 
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Figure 11.10 

Apparence d' une fenetre flottante 



Menus et barres d'outils 

La bibliotheque dojo implemente deux types de menus et une barre d'outils sous forme 
de composants graphiques. Le premier correspond a une barre de menus, tandis le second 
met a disposition un menu contextuel utilisable par le biais du clic droit de la souris. 

Tous ces types de menus et la barre d'outils sont localises respectivement dans les modu- 
les dojo. widget. Menu2 et dojo. widget. Toolbar, qui doiventetre importes dans la page Web. 

Menus contextuels 

Les menus contextuels sont mis en oeuvre dans la bibliotheque dojo en se fondant sur 
les composants graphiques dojo. widget. PopupMenu2, dojo. widget .Menultem2 et 
dojo. widget. MenuSeparator2, correspondant respectivement au menu contextuel ainsi 
qu'a ses elements. 

Ces differents composants permettent de construire un menu (repere O) ainsi que ses 
elements, comme dans le code suivant : 

<html> 
<head> 
(...) 
<script type="text/javascript"> 

dojo.require("dojo.widget.Menu2" ) ; 
</script> 

<script type="text/javascript"> 
function executerAction( ) { 

alertC'Action declenchee sur un element de menu"); 
} 
</script> 
</head> 



Support graphique de la bibliotheque dojo 



Chapitre 1 1 

<body> 

<div dojoType="PopupMenu2" widgetId="monMenu"<-© 

contextMenuForWindow="true"><-© 
<div dojoType="MenuItem2" 

caption="Executer une action"*-© 
onClick="executerAction( ) ; "X/div><-0 
<div dojoType="MenuItem2" 

caption=" Element desactive" 
disabled="true"X/div><-© 
<div dojoType="MenuSeparator2"X/div> 
<di v dojoType="MenuItem2" 

caption=" Element active"X/div> 
</div> 
</body> 
</html> 

Divers attributs permettent de specifier le libelle d'un element de menu (attribut caption, 
repere ©), de le desactiver (attribut disabled, repere ©) et de lui associer une action sur 
un clic (attribut oncl i ck, repere 0). 

L' attribut contextMenuForWindow (repere ©) permet de specifier quel menu doit correspondre 
au menu contextuel de la page Web, ce dernier etant affiche par un clic droit de la souris. 

La bibliotheque dojo offre la possibility de creer des sous-menus et de les relier simplement 
a un element d'un menu principal, menu pouvant correspondre aussi bien a une barre de 
menus qu'a un menu contextuel. 

Comme le montre le code suivant, la liaison se realise en se fondant sur l'attribut submenuld 
(repere ©) des elements de menu, attribut contenant l'identifiant d'un menu (repere ©) : 

<html> 
<head> 
(...) 
<script type="text/javascript"> 

dojo.requi re("dojo.widget.Menu2") ; 
</script> 

<script type="text/javascript"> 
function executerActiont ) { 

alertC'Action declenchee sur un element de menu"); 
) 
</script> 
</head> 
<body> 

<div dojoType="PopupMenu2" widgetId="monMenu" 

contextMenuForWindow="true"> 
<di v dojoType="MenuItem2" 

caption="Executer une action" 
onClick=" executerActiont ) ; "></div> 
<div dojoType="MenuItem2" 

caption="Element desactive" disabled="true"X/div> 
<di v dojoType="MenuSeparator2"X/div> 
<di v dojoType="MenuItem2" 

caption=" Element active"X/div> 
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<di v dojoType="MenuItem2" 
caption="Sous menu" 
submenu I d="monSousMenu"X/div><-© 
</div> 

<div dojoType="PopupMenu2" widgetId="monSousMenu"><-© 
<di v dojoType="MenuItem2" 

caption="Executer une action" 
onCl ick="executerAction( ) ; "></div> 
<di v dojoType="MenuItem2" 

caption="Element desactive" 
disabled="true"X/div> 
</div> 
</body> 
</html> 

La figure 11.11 illustre l'apparence du menu contextuel mis en oeuvre dans cette section. 



Figure 11.11 

Apparence d'un menu contextuel 
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Barres de menus 

Les barres de menus sont mises en oeuvre dans la bibliotheque dojo en se fondant sur les 
composants graphiques dojo. widget. MenuBar2 et dojo. widget. MenuBarItem2, correspondant 
respectivement a la barre de menus ainsi qu'a ses elements. 

A l'instar du type de menu decrit a la section precedente, le composant dojo. widget. 
MenuBarItem2 peut faire reference a un menu en se fondant sur l'attribut submenuld et 
supporte les memes attributs. 

Le code suivant fournit un exemple de mise en oeuvre d'une barre de menus (repere O) 
permettant d'ouvrir un menu (repere ©) sur un de ces elements (repere ©) : 

<html> 
<head> 
(...) 
<script type="text/javascript"> 

dojo.require("dojo.widget.Menu2" ) ; 
</script> 

<script type="text/javascript"> 
function executerAction( ) { 

alertC'Action declenchee sur un element de menu"); 
} 
</script> 
</head> 
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<body> 

<div dojoType="MenuBar2"><-© 
<di v dojoType="MenuBarItem2" 
caption="Elementl" 
submenu I d="monSousMenu"X/div><-© 
<div dojoType="MenuBarItem2" 

caption=" Element 2" disabled="true"X/di v> 
<di v dojoType="MenuBarItem2" 

caption="Executer une action" 
onClick="executerAction( ) ; "></div> 
</div> 

<di v dojoType="PopupMenu2" widgetId="monSousMenu"><-© 
<di v dojoType="MenuItem2" 

caption="Executer une action" 
onClick=" executer Acti on ( ) ; "></div> 
<div dojoType="MenuItem2" 

caption="Element desactive" disabled="true"X/div> 
</div> 
</body> 
</html> 

La figure 11.12 illustre l'apparence de labarre de menus mise en oeuvre dans cette section. 





Elementl ElwiWita: Executer une action 




Executer une action 
Element desactive 











Figure 11.12 

Apparence d'une barre de menus 

Barres d'outils 

Les barres d'outils sont mises en oeuvre dans la bibliotheque dojo en se fondant sur les 
composants graphiques do jo. widget. Tool barContainer, do jo. widget. Tool bar, do jo. widget. 
ToolbarButtonGroup et dojo. widget. ToolbarSelect, correspondant respectivement au 
conteneur de la barre, a la barre d'outils elle-meme ainsi qu'a ces divers elements. 

La creation d'une barre d'outils doit etre realisee par programmation en se fondant sur la 
fonction dojo. widget. createwidget, precedemment decrite. Les composants sont ajoutes 
les uns aux autres par l'intermediaire de leur methode addChi 1 d. 

La creation de la structure de la barre se realise de la maniere suivante : 



// Creation du conteneur 

var conteneur = dojo. widget. createWidget( "ToolbarContainer") ; 

// Creation de la barre d'outils 

var barreOutils = dojo. widget .createWidgetC'Tool bar" , { 

id: "barreOutils" }); 
conteneur. addChild(barreOutils) ; 
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III Ajout de la barre d'outils a la page 
documen t. body . insertBef ore (con teneur.domNode, 
document.body.firstChild) ; 

Cette barre d'outils peut des lors etre enrichie avec des boutons et des groupes de 
boutons, des separateurs et des listes de saisie, comme dans le code suivant : 

(...) 

// Creation de boutons independants 

barreOutil s.addChildC'images/gras.gif" , null , {toggleItem:true} ) ; <-© 

barreOutil s.addChild("images/ital ique.gif " , null , {toggleItem:true} );<-€> 

barreOutil s.addChildC images /soul igne.gif " , null , {toggleItem:true} ) ;<-© 

barreOutil s.addChildC" | ");<-© 

// Creation d'un groupe de boutons 

var groupeBoutons = dojo. widget. createWidgetC'ToolbarButtonGroup" , {<-© 

name: "al ignement", 
default Button: "al ignementGauche" , 
preventDeselect: true 

}); 

groupeBoutons .addChildt " images /a 1 ignementGauche.gif") ; 

groupeBoutons .addChildt "i mages /al ignementCentre.gif") ; 

groupeBoutons .addChildt " images /a 1 ignementDroite.gif") ; 

groupeBoutons .addChildt " images /a 1 ignementTotal . gif ") ; 

barreOutil s. addChildt groupeBoutons) ; 



barreOutils.addChild("|"); 
barreOutil s.addChildC' test") ; 
barreOutils.addChild("|"); 
// Creation d'une boite de selection 

var boiteSelection - dojo. widget. createWidgetC'Tool barSelect" , 

name: "boiteSelection", 
values: { 

"Valeurl": "vl", 
"Valeur2": "v2" 



© 



}); 

barreOuti Is. addChildt boiteSelection) ; 

Les elements elementaires, tels que textes et images, sont ajoutes directement a la barre de 
menus (reperes O). Les elements plus complexes, tels que groupes de boutons (repere ©) 
ou boites de selection (repere ©), sont egalement ajoutes a la barre. 

Comme l'indique le code suivant, la barre d'outils offre la possibility d'interagir avec ses 
boutons afin de determiner leur etat (reperes O), le modifier (repere ©) ou les desactiver 
(repere ©) : 

var barreOutils = dojo. widget. byldt "barreOutils" ) ; 

var boutonGras = barreOutils .getltemC'gras") ; 

var boutonAl ignementGauche = barreOutils .getltemC'al ignement") 

.getltemC'al ignementGauche" ) ; 
var estSelectionne = boutonGras. isSelectedt )); «-0 
// estSelectionne contient true si le bouton boutonGras est selectionne 
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var estActive = boutonGras. isEnabled());<-© 

// estActive contient true si le bouton boutonGras est active 

// Selectionne le bouton boutonAl ignementGauche 

boutonAl ignementGauche.setSelected(true) ; <-© 

// Desactive le bouton boutonGras 

barreOuti Is. disable ("boutonGras") ; <-© 

Notons que les noms specifies dans les methodes ci-dessus peuvent correspondre au nom 
d'un element complexe, au texte ou au nom des fichiers des images des boutons sans leur 
extension. 

La figure 11.13 illustre l'apparence de la barre d'outils mise en oeuvre dans cette section. 
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Figure 11.13 

Apparence d'une barre d'outils 

Composants complexes 

La bibliotheque dojo met a disposition divers composants plus complexes, tels que tableaux, 
arbres ainsi qu'un editeur Wysiwyg. 



Tableaux 

dojo offre la possibilite de mettre en oeuvre des tableaux en se fondant sur les composants 
graphiques FilteringTable et SortableTable. 

Le premier permet de definir un tableau dont le contenu affiche peut etre trie et modifie 
en se fondant sur des filtres. Le second correspond a un tableau dont le contenu affiche peut 
etre trie par colonne. Nous ne detaillons dans cette section que le premier composant, le 
second etant deprecie. 

La mise en oeuvre d'un composant de type FilteringTable se fonde sur la balise HTML 
table, qui permet notamment de definir les en-tetes du tableau. Les donnees du tableau 
peuvent etre specifiees dans cette balise ou etre chargees par programmation en se fondant 
sur des structures JSON. 

Le code suivant fournit un exemple de mise en oeuvre d'un tableau de ce type et specifie 
les donnees dans le corps de la balise table : 

<table dojoType="FilteringTable" id="monTableau" 

headClass="fixedHeader" tbodyCl ass=" scroll Content" 

enabl eAl ternateRows="true" 

rowAl ternateCl ass="alternateRow" 

multiple="false" al ternateRows="true" maxSortable="2" 

eel 1 paddi ng="0 " eel lspacing="0" border="0"> 



Bibliotheques JavaScript graphiques 



Partie IV 



<thead> 
<tr> 

<th field="Numero" dataType="Number"<-0 

align="center">Numero</th> 
<th field="Nom" al ign="center" dataType="String"<-© 

valign="top">ISBN</th> 
<th field="Titre" dataType="htmr>Titre</th><-0 
<th field="Auteurs" dataType="String"<-0 

val ign="top">Auteurs</th> 
<th field="DateParution" dataType="Date"<-0 
format="S&d %b %Y" al ign="center" 
val ign="top">Date de parution</th> 
</tr> 
</thead> 
<tbody> 

<tr value="l"><-© 
<td>K/td> 
<td>2212117108</td> 

<td><p>Spring par la pratique</p></td> 
<td>J. Dubois, J. P. Retains. T. Tempi ier</td> 
<td>04/28/2006</td> 
</tr> 

<tr value="2"><-© 
<td>2</td> 
<td>2212115709</td> 

<td><p>CSS 2: Pratique du design web</p></td> 
<td>R. Goetter et S. Blondeel</td> 
<td>07/16/2005</td> 
</tr> 

<tr value="3"><-© 
<td>3</td> 
<td>-</td> 

<tdXp>JavaScript pour le Web 2.0</pX/td> 
<td>A. Gougeon, T. Templier</td> 
<td>ll/30/2006</td> 
</tr> 
</tbody> 
</table> 

Le code ci-dessus definit tout d'abord dans l'en-tete du tableau des informations relatives 
aux identifiants et aux types (attributs field et dataType, reperes O), ainsi qu'aux libelles 
(corps de la balise th) des colonnes du tableau. 

Les differentes lignes du tableau sont ensuite definies comme en HTML. Notons cependant 
la presence de l'attribut val ue (reperes ©) pour les balises tr des lignes, qui permet de les 
identifier notamment au moment des selections de ligne. 
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Le tableau cree est automatiquement triable en cliquant sur les en-tetes de ses colonnes. 

Le tableau 1 1.19 recapitule les principaux attributs utilisables pour le composant Fi 1 ten' ng- 
Tabl e en plus des attributs standards de la balise tab! e. 



Tableau 11.19 Principaux attributs du composant graphique FilteringTable 



Attribut 

al ternateRows 

headClass 
headerClass 
headerDownCl ass 

headerUpClass 

maxSortable 

multiple 

rowAl ternateClass 
rowClass 

rowSelectedClass 
tbodyCl ass 



Description 

Specifie si les traitements d'affichage relatifs aux lignes paires et impaires doivent etre mis 
en ceuvre. La valeur par defaut est f al se. 

Specifie la classe CSS utilisee pour I'en-tete du tableau (balise thead). 

Specifie la classe CSS utilisee pour les differents en-tetes du tableau (balise th). 

Specifie la classe CSS utilisee pour I'en-tete de la colonne triee de maniere descendante. 
Par defaut, la classe utilisee est sel ectedDown. 

Specifie la classe CSS utilisee pour I'en-tete de la colonne triee de maniere ascendante. 
Par defaut, la classe utilisee est sel ectedUp. 

Specifie le nombre de colonnes sur lesquelles un tri peut etre realise simultanement. La 
valeur par defaut est 1. 

Specifie si plusieurs lignes peuvent etre selectionnees dans le tableau. La valeur par defaut 
est false. 

Specifie la classe CSS utilisee pour differencier les lignes paires des lignes impaires . 

Specifie la classe CSS utilisee pour une ligne (balise tr). 

Specifie la classe CSS utilisee pour une ligne selectionnee (balise tr). 

Specifie la classe CSS utilisee pour le corps du tableau, (balise tbody). 



Le code suivant donne un exemple d'utilisation de ces attributs afin de parametrer le 
comportement (repere ©) ainsi que les classes CSS utilisees par le tableau (repere O) : 

<table dojoType="FilteringTable" id="monTableau" 

tbodyClass="scrol 1 Content" rowAl ternateCl ass="al ternateRow"<-© 

mul tiple="false" alternateRows="true" maxSortable="l"<-© 

eel lpadding="0" cellspacing="0" border="0"> 

(...) 
</table> 

La figure 1 1.14 illustre l'apparence du tableau mis en oeuvre dans cette section. 
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Figure 11.14 

Apparence d'un tableau triable 
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Comme le montre le code suivant, le composant dojo.widget.FilteringTable met a dispo- 
sition la methode getSelectedData (repere O) afin d'avoir acces aux donnees selectionnees : 

function getDonneeSelectionnee( ) ( 

var monTableau = dojo. widget .byldC'monTableau") ; 

return monTableau. getSelectedData ( ) ; <-0 
} 

Le composant dojo .wi dget . Fi 1 ten' ngTabl e offre la possibilite de modifier son contenu par 
programmation par 1' intermediate de son attribut store en se fondant sur des donnees 
structurees au fomiat JSON. Ce dernier attribut est de type dojo.data.SimpleStore etpeut 
ainsi etre mis a jour par le biais du support Ajax de dojo. 

Le code suivant indique la maniere d'ajouter un element au tableau par programmation 
en se fondant sur la methode addData (repere O) de son attribut store : 

function ajouterl_igne( ) { 

var monTableau - dojo. widget. byldC'monTableau") ; 
monTableau.store.addData( { <-© 

Numero: "4", 

Isbn: "2212119658", 

Titre: "Developpez en Ajax", 

Auteurs: "Michel Plasse", 

DateParution: "09/14/2006" 



}); 



} 



Notons que la bibliotheque offre la possibilite de remplacer toutes les donnees d'un tableau 
avec la methode setData et de supprimer une de ses lignes avec la methode removeData. 

Comme le montre le code suivant, des filtres relatifs aux donnees afnchees peuvent faci- 
lement etre appliques a un champ du tableau en se fondant sur la methode setFilter 
(repere ©) du composant Fi 1 teri ngTabl e et des fonctions de rappel (repere O) : 

function filtreDateParution(dateParution) {<-© 

return (dateParution > new Date( "06/01/2004") 

&& dateParution < new Date( "08/01/2005" )) ; 
} 
function filtrerDonnees( ) { 

var monTableau - dojo. widget. byldC'monTableau") ; 

monTabl eau. set Filtert" DateParution" , filtreDateParution) ; <-© 
} 

Notons que la methode cl earFi 1 ters permet de supprimer tous les filtres specifies pour le 
tableau et done d'afficher la totalite de ses donnees. 



Arbres 

La bibliotheque dojo fournit divers composants graphiques afin de mettre en oeuvre des 
arbres dans des pages Web. 
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Deux versions cohabitent actuellement dans la distribution de dojo, mais nous ne detaillons 
dans cette section que la nouvelle version, designee par le terme V3. 

La structure de l'arbre est definie par l'imbrication de ses differents nceuds, comme 
l'indique le code suivant : 

<div dojoType="TreeV3"> 

<di v dojoType="TreeNodeV3" title="Element 1"> 

<div dojoType="TreeNodeV3" title=" Element 1.1" ></div> 
<div dojoType="TreeNodeV3" title=" Element 1.2" > 
<div dojoType="TreeNodeV3" 

title="Element 1.2.1" ></div> 
<div dojoType="TreeNodeV3" 

title="Element 1.2.2" ></div> 
</div> 

<div dojoType="TreeNodeV3" titles" Element 1.3" > 
<di v dojoType="TreeNodeV3" 

title="Element 1.3.1" ></div> 
<div dojoType="TreeNodeV3" 

title="Element 1.3.2" ></div> 
</div> 

<div dojoType="TreeNodeV3" title="Element 1.4" > 
<di v dojoType="TreeNodeV3" 

title="Element 1.4.1" ></div> 
</div> 
</div> 
</div> 

Une fois cette structure definie, diverses entites doivent lui etre associees afin de gerer 
l'interaction avec l'utilisateur. 

La premiere consiste en l'entite de controle de l'arbre, qui permet de deplier et de refermer 
les branches de l'arbre. Une implementation de cette entite est fournie par le composant 

dojo.widget.TreeBasicControl lerV3. 

La seconde gere la selection des noeuds de l'arbre et correspond au composant 
dojo. widget. TreeSelectorV3. Une autre entite, le composant dojo. widget. TreeEmphaseOn- 
Sel ect, peut etre specifiee en plus afin que le noeud clique soit selectionne. 

Comme l'indique le code suivant, ces differentes entites sont reliees a l'arbre par l'inter- 
mediaire de son attribut 1 i steners (repere O) : 

<div dojoType="TreeBasicControl lerV3" widget I d="cont roll er"X/div> 
<div dojoType="TreeSelectorV3" widgetId="selector"X/div> 
<div dojoType="TreeEmphaseOnSelect" selector="selector"X/di v> 
<di v dojoType="TreeV3" 1 isteners="controller,selector"><-0 

(...) 
</div> 

La figure 11.15 illustre l'apparence de l'arbre mis en oeuvre dans cette section. 
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Figure 11.15 

Apparence d'un arbre 
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Comme le montre le code suivant, divers attributs des noeuds offrent la possibility d'etendre 
des branches (attribut expandLevel, repere O) et de selectionner un noeud (attribut selected, 
repere ©) au moment de la creation de la structure d'un arbre : 

<di v dojoType="TreeV3"> 

<di v dojoType="TreeNodeV3" title=" Element 1"> 

<div dojoType="TreeNodeV3" title="Element 1.1" expandl_evel="2"X/di v><-€> 
<div dojoType="TreeNodeV3" title=" Element 1.2" selected="true"><-© 
<di v dojoType="TreeNodeV3" title=" Element 1.2.1" ></div> 
<di v dojoType="TreeNodeV3" title="Element 1.2.2" ></div> 
</div> 
</div> 
</div> 

Le tableau 11.20 recapitule les attributs utilisables pour des elements d'arbres. 
Tableau 1 1 .20 Attributs des elements d'arbres 

Attribut Description 

expandLevel Specifie le nombre de niveaux a ouvrir sous le nceud. 

isFolder Specifie que le nceud n'estpas une feuille de I'arbre et peut contenir des sous-elements, 

ob j ect Permet de specifier une adresse qui est accedee par I'intermediaire d'un die sur le nceud. 

sel ected Specifie que le nceud de I'arbre est selectionne. 



La prise en compte des evenements se realise en se fondant sur l'entite de selection associee 
a I'arbre. Cette entite supporte les evenements de selection par un clic ou un double-clic 
ainsi que les evenements de deselection. 

Comme le montre le code suivant, l'enregistrement d'observateurs s'effectue par I'inter- 
mediaire du support des evenements de dojo avec la methode connect de l'objet dojo. event 
(reperes O) : 

function traiterSelection(message) { 

alertC'Evenement de selection: "+message); 
} 
function traiterDeselection(message) { 

alertC'Evenement de deselection: "+message); 
} 
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function initial isationt ) { 

var selector - dojo. widget. byldCselector" ) ; 

do jo. event, connect (selector, "select" , "traiterSelection" ) ; <-© 

do jo. event. connect (selector, 

"deselect" , "traiterSelection" ) ; <-0 
} 
dojo. addOnLoadt initial i sat ion) j 

Notons que l'association d'observateurs d'evenements d'un arbre doit etre realisee apres 
la creation de ce dernier. L' utilisation de la fonction do j o . addOn Load permet de realiser ces 
traitements a ce moment. Notons que les observateurs acceptent en parametre un message 
contenant le type du nceud ainsi que son libelle. 

La nouvelle version de support des arbres offre la possibility de leur associer des menus 
contextuels et de gerer le glisser-deposer. La mise en oeuvre de ces fonctionnalites 
consiste en 1'utilisation d'un composant de type TreeContextMenuV3 et d'un controleur d'arbre 
de type TreeDndControl erV3, entites dont nous ne detaillons pas ici la mise en oeuvre. 

Editeur Wysiwyg 

La bibliotheque dojo met a disposition le composant do j o . wi dget . Edi tor2 afin de permet- 
tre l'edition visuelle d'elements d'une page HTML. Ce composant permet done de 
mettre en oeuvre un editeur Wysiwyg. 

Le code suivant fournit un exemple de mise en oeuvre de ce composant graphique (repere O) 
dans une page Web : 

<html> 
<head> 
(...) 
<script type="text/javascript"> 

dojo.requi re("dojo.widget.Menu2") ; 
</script> 

<script type="text/javascript"> 
function executerActionC ) { 

alertC'Action declenchee sur un element de menu"); 
) 
</script> 
</head> 
<body> 

<di v id="editable"dojoType="Editor" wi dget Id=" edi tdi v"><-0 
Ceci est un texte editable avec 1 'editeur Wysiwyg de la 
bibliotheque dojo 
</div> 
</body> 
</html> 

Comme l'indique le code suivant, qui adapte l'exemple precedent, il est possible de 
restreindre les elements contenus dans la barre d'outils en se fondant sur l'attribut items 
(repere O) de 1' editeur : 
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<di v i d= " edi t abl e " do joType=" Editor" widgetld="editdiv" 

items="formatblock; | ; insert unorderedl ist;insertorderedl ist ; | ;bold;ital ic; 
Sunder 1 ine;strikethrough; | ;createLink; "><-0 
Ceci est un texte editable avec 1'editeur Wysiwyg de la 
bibliotheque dojo 
</div> 

La figure 11.16 illustre l'affichage de ce type de composants dans une page HTML. 





p5ave [XjConcd | | Norrrlal ,| |v 8 idana z\ |l (14 pi) zl | B * \J & \ D d> \ ^ = ^ \ \= 

Ceci estun texre editable avec l'edileur Wysiwyg de la bibliotheque doio 


:= *5 S 


A Iftl - 


|Mnrmal _J IE IE [ U ( U « | A 


Ceci estun teste editable avec rediteiir Wvsnrvs de la bibliothecpie iloio 

• Piemiei clemenl 

• Second element 



Figure 11.16 

Aspect de Vediteur Wysiwyg de la bibliotheque dojo 

Etude de cas 

Dans le cadre de cet ouvrage, une etude de cas a ete realisee afin de fournir un exemple 
de mise en ceuvre du langage JavaScript, des techniques Ajax et de la bibliotheque dojo. 

Cette etude de cas consiste en une application de gestion de sites archeologiques permet- 
tant de definir et modifier les informations relatives a un site archeologique, telles que 
son nom, la commune ou il est localise ainsi que son type. 

Un aspect important consiste egalement en leur localisation sur des cartes. Comme nous 
le verrons au chapitre 13 relatif a Google Maps, des fonctionnalites ont ete developpees 
afin de situer des sites dans leur contexte geographique. 

Mise en ceuvre de dojo 

Le contenu de la version 0.3. 1 de la distribution de dojo a ete copiee dans le repertoire js/ 
dojo-0.3.1 de notre application Web, repertoire auquel ses differentes pages peuvent faire 
reference. 

Comme l'indique le code suivant, la configuration de la bibliotheque dojo se realise 
comme decrit au chapitre 7 en instanciant un objet nomme djConfig (repere O) et en 
important le fichier principal (repere ©) de la bibliotheque, fichier nomme dojo.js : 

<html> 
<head> 

<script type="text/javascript"> 

djConfig = { isDebug: true };<-© 
</script> 
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<script type="text/javascript" 

src="/js/dojo-0.3.1/dojo. js"X/script><-© 
<script type="text/javascript"> 

(...) 
</script> 
</head> 
<body> 

(...) 
</body> 
</html> 

Comme indique dans le code suivant, les differents modules de dojo utilises sont importes 
dans chaque page HTML en se fondant sur la fonction dojo. requi re (reperes O) : 

<html> 
<head> 

<script type="text/javascript"> 

djConfig = { isDebug: true }; 
</script> 
<script type=" text/ javascript" 

src= "/do jo -0.3.1 /dojo. js"X/script> 
<script type="text/javascript"> 

dojo. requi re( "do jo. widget. Dialog" ) ; <-0 
dojo. requi re ("do jo. widget. Fil teringTable" ) ; <-0 
(...) 
</script> 
</head> 
<body> 

(...) 
</body> 
</html> 

Utilisation de composants graphiques 

Une partie de l'etude de cas met en oeuvre les composants do jo. widget. Fil teringTable et 
dojo. widget. Dialog atin de gerer les donnees des sites sous forme de tableau. 

Le tableau (composant dojo. widget. Fil teringTable) offre egalement la possibilite de 
modifier les donnees de base des sites archeologiques, a savoir le numero, le nom et le type 
du site ainsi que la commune sur laquelle il est situe en se fondant sur une fenetre de saisie 
(composant dojo .widget . Dial og), laquelle s'affiche par dessus le tableau dans la page Web. 

Ann d'alleger la description de ce mecanisme, nous avons omis dans cette section le code 
mettant en oeuvre les principes Ajax. Ce code n'a pas trait aux aspects graphiques de la 
page et permet simplement de charger et de modifier les donnees de la base de donnees 
par le biais d'une application accessible par l'intermediaire de 1' architecture REST. 
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Mise en ceuvre des composants 

Le premier composant mis en ceuvre dans le code suivant consiste en une fenetre modale 
permettant d'ajouter ou d'editer des informations du tableau. La fenetre contient les 
champs correspondant aux differentes proprietes d'un site, a savoir le numero (repere O), 
le nom (repere ©) et le type (repere 0) du site, ainsi que la commune (repere ©) sur 
laquelle il est situe et deux boutons permettant de declencher les traitements d'enregistre- 
ment (repere ©) des donnees et d'annulation (repere ©) : 

<div dojoType="Dialog" id="fenetreSaisie" bgColor="white" bg0pacity="0.9" 
*»toggle="fade" toggleDuration="250"> 

<di v al ign="center" class="fenetreSaisie"Xem>Edition des donnees du site: 

*</emX/divXbr/> 
<form onsubmit="return false;"> 
<div al ign="center"> 

<table class="fenetreSaisie"> 
<tr> 

<td>Numero:</td> 

<td><input id="fenetreSai si e. numero" 
type="text"/X/td><-0 
</tr> 
<tr> 

<td>Commune:</td> 

<td><input id="fenetreSai si e. commune" 
type="text"/X/td><-© 
</tr> 
<tr> 

<td>Nom:</td> 

<td><input id="fenetreSaisie.nom" 
type="text"/X/td><-© 
</tr> 
<tr> 

<td>Type:</td> 

<td><input id="fenetreSaisie.type" 
type="text'7X/td><-0 
</tr> 
</table> 
</div> 
</form> 
<div style="float: right ;"> 

<button dojoType="button" id="boutonAnnuler">Annuler</button><-© 
</div> 
<div style="float: right ;"> 

<button dojoType=" button" id="boutonEnregistrer">Enregistrer</button><-© 
</div> 
</div> 
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La figure 11.17 illustre l'apparence de la fenetre de saisie. 



Numero: 

Commune: 

Nom: 

Type: 


Edition des donnees du site: 
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Alignement 








| Enregistrer 


Annuler | 



Figure 11.17 

Apparence de la fenetre de saisie 



Dans le code suivant, le second composant correspond au tableau lui-meme, dont les 
proprietes generates (reperes O) sont tout d'abord definies, suivies des en-tetes de ses 
colonnes (repere ©) et des donnees utilisees pour 1' initialiser (repere ©) : 

<table dojoType="FilteringTable" id="tableau" 

tbodyClass="scrol 1 Content" rowAl ternateCl ass="al ternateRow"<-© 
mul tiple="false" alternateRows="true" maxSortable="l"<-0 
eel lpadding="0" eel 1 spacing="0" border="0"><-0 
<thead><-@ 
<tr> 

<th field="numero" align="center" 
dataType=" Number ">Numero</th> 
<th field="commune" al ign="center" 

dataType="String" valign="top">Commune</th> 
<th field="nom" dataType="html ">Nom</th> 
<th field="type" valign="top" 
dataType="String">Type</th> 
</tr> 
</thead> 
<tbody><-© 

(...) 
</tbody> 
</table> 

Notons que les attributs field des colonnes correspondent aux noms des attributs dans les 
structures JSON representant les donnees du tableau. 

Pour finir, le code suivant met en oeuvre divers boutons positionnes dans la page Web sous 
le tableau afin de permettre les actions d'ajout (repere ©), de modification (repere ©) et 
de suppression (repere O) d'elements du tableau ; dans les cas d'ajout et de modification, 
ils declenchent l'ouverture de la fenetre de saisie : 
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<di v style="float : right ;"> 

<button id="boutonSupprimer"dojoType=" button "><-© 

Supprimer le site selectionne</button> 
</div> 
<div style="float: right ;"> 

<button id="boutonOuvrirEditer"dojoType="button"><- © 

Modifier le site selectionne</button> 
</div> 
<div style="float : right ;"> 

<button i d= " boutonOuvrirAj outer" do joType=" button "><-© 
Ajouter un site</button> 
</div> 

La figure 11.18 illustre l'apparence du tableau et des boutons. 
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^^^■^^^^^^^^^^^^H 









Figure 11.18 

Apparence du tableau et de ses boutons de manipulation 



Specification des comportements 

Maintenant que nous avons defini les differents composants graphiques proposes par la 
bibliotheque dojo, nous allons voir comment implementer les traitements qui leur sont 
attaches. 

Ces divers traitements sont mis en oeuvre par l'intermediaire de la classe Gestionnai reTa- 
bleau, laquelle permet d'enregistrer automatiquement certaines de ses methodes en tant 
qu'observateur des differents boutons decrits a la section precedente. 

Afin d'avoir acces aux elements qu'elle manipule, la classe Gestionnai reTableau fournit 
la methode initialiser, qui prend en parametres les differents elements qu'elle mani- 
pule. Ces elements correspondent au tableau, a la fenetre de saisie et aux boutons. 

Le code suivant donne un exemple de la structure de base de la classe Gestionnai re- 
Tabl eau, structure correspondant au constructeur (repere O) de la classe et a ses methodes 
d' initialisation (repere ©) et d'enregistrement des observateurs d'evenements (repere ©) : 

function GestionnaireTableaut ) { }<-© 
Gestionnai reTableau. prototype = ( 

initialiser: function(elements) {<-© 
this. tableau = elements["tableau"] ; 
this.fenetreSaisie = elements["fenetreSaisie"] ; 
this.boutonFenetreAjout = elements["boutonFenetreAjout"] ; 
this.boutonEnregistrer = elements["boutonEnregistrer"] ; 
this.boutonFenetreEdition = 

el ements["boutonFenetreEdition"] ; 
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this.boutonSupprimer = elements["boutonSupprimer"] ; 
this.boutonAnnuler = elements["boutonAnnuler"] ; 
this.enregistrerObservateurs( ) ; 
), 
enregistrerObservateurs: functionO {<-© 

do j o. event .connect (this. boutonFenetreAj out, "onCl ick" , 

this, "ouvri rFenetreSaisiePourAjout") ; 
do jo. event .connect (this. boutonFenetreEdit ion, "onCl ick" , 
this, "ouvri rFenetreSai si ePourModifi cation" 
do jo. event. connect (t hi s.bouton En registrer, "onClick" , 

this, "enregistrerLigne") ; 
do jo. event .connect (this.boutonSupprimer, "onCl ick" , 

this, "supprimerLigne") ; 
do jo. event. connect (this.boutonAnnuler, "onClick" , 
this, "annul er"); 



) 

La classe implemente egalement les methodes de traitement des diverses actions de 
l'utilisateur. 

Ces actions sont recapitulees au tableau 11.21. Les numeros de reperes figurant dans le 
tableau renvoient a l'exemple de code suivant, qui fournit un exemple de mise en oeuvre 
de ces differentes methodes dans la classe GestionnaireTableau : 

function GestionnaireTableau( ) { } 
Gestionnai reTableau. prototype = { 
(...) 

initial iserDonneesFenetreSaisie: functionO { 
dojo. byld( "fenetreSaisie.numero") .value = ""; 
dojo. byld( "fenetreSaisie. commune" ) .val ue = ""; 
dojo. byldCfenetreSaisie.nom"). value = ""; 
dojo. byld( "fenetreSaisie. type" ) .val ue = ""; 
), 

getDonneesFenetreSaisie: functionO { 
return { 

numero: do jo. by Id ("fenetreSaisie.numero" ) .val ue, 
commune: do jo. by Id ("fenetreSaisie. commune") .value, 
nom: do jo. byldCfenetreSaisie.nom" ) .value, 
type: dojo. by Id ( "fenetreSaisie. type" ) .val ue, 



setDonneesFenetreSaisie: function(donnees) { 
dojo.byldf "fenetreSaisie.numero") .val ue 

= donnees["numero"] ; 
dojo.byldf "fenetreSaisie. commune" ) .val ue 

= donnees["commune"] ; 
dojo.byldf "fenetreSaisie. nom" ) .val ue = donnees["nom"] ; 
dojo.byldf "fenetreSaisie. type" ) .val ue = donnees["type"] ; 
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ouvrirFenetreSaisiePourAjout : functionO {<-© 
this.initialiserDonneesFenetreSaisie( ) ; 
this.ajout - true; 
this.fenetreSaisie.show( ) ; 
}, 

ouvri rFenetreSaisiePourModifi cation: functionO {<-< 
this.initialiserDonneesFenetreSaisie( ) ; 
var donnees = this. tableau. getSelectedData( ) ; 
if( donnees!=nul 1 ) { 

this.setDonneesFenetreSai si e( donnees) ; 
this.ajout = false; 
this.fenetreSaisie.show( ) ; 



enregistrerLigne: functionO {<-© 
if( this.ajout == true ) { 

this. tableau. store. addDatat 

this.getDonneesFenetreSaisiet ) ) ; 
} else { 

var donnees = this. tableau. getSelectedData( ) ; 
thi s. tableau.s tore. removeDat a (donnees) ; 
this. tableau. store. addDatat 

this.getDonneesFenetreSaisiet ) ) ; 
} 

this.fenetreSaisie.hidet ) ; 
}, 
supprimerLigne: functionO {<-© 

var donnees = this. tableau. getSelectedDataO ; 
if( donnees!=nul 1 ) { 

this. tableau. store. removeDat a (donnees) ; 



annuler: functionO {<-© 
this.fenetreSaisie.hidet ) ; 



Tableau 1 1 .21 Actions des elements de I'ecran 



Bouton 


Methode de traitement 


Description 


boutonAnnuler 


annuler (repere ©) 


Action survenant dans la fenetre de saisie et permettant 
de la termer sans enregistrer les donnees saisies 


boutonEnregistrer 


enregistrerLigne (repere ©) 


Action survenant dans la fenetre de saisie et permettant 
de la termer en enregistrant les donnees saisies 


boutonOuvri rAjouter 


ouvrirFenetreSaisiePourAjout 
(repere O) 


Action permettant d'ouvrir la fenetre de saisie afin d'ajouter 
un site dans le tableau 


boutonOuvri rEditer 


ouvri rFenetreSaisiePourModi - 
fi cation (repere ©) 


Action permettant d'ouvrir la fenetre de saisie afin de 
modifier le site selectionne dans le tableau. Les donnees 
du site sont chargees dans le formulaire de la fenetre. 


boutonSupprimer 


supprimerLigne (repere 0) 


Action permettant de supprimer le site selectionne dans le 
tableau 
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Notons que la manipulation des donnees affichees dans le tableau se fonde sur la propriete 
store du tableau, qui correspond a une instance de type dojo. data. SimpleStore. La modi- 
fication de son contenu est repercutee automatiquement sur l'affichage du tableau. Cette 
modification se realise notamment par le biais de ses methodes addData et removeData. 



Conclusion 



Comme nous avons pu le voir dans ce chapitre, le support graphique de la bibliotheque 
dojo est d'une rare richesse. II consiste tout d'abord en un ensemble de modules utilitaires 
permettant de manipuler les differents constituants des pages Web, de gerer les evenements, 
les effets ainsi que le glisser-deposer. 

Ces modules adressent ces differentes problematiques tout en integrant les specificites 
des navigateurs. Cet aspect permet de rendre leurs traitements portables dans tous les 
navigateurs. 

Notons que le module doj o . i 18n, en cours de developpement, a pour objectif de resoudre 
les problematiques liees a l'internationalisation des applications JavaScript dans les 
pages Web. 

Le support graphique de dojo va plus loin encore puisqu'un reel effort a ete accompli afin 
de structurer et mettre en oeuvre des composants graphiques. Dans ce cadre, la bibliotheque 
se revele particulierement flexible puisqu'elle offre aussi bien une approche fondee sur la 
structure HTML de la page qu'une approche par programmation. 

En se fondant sur cette structure, la bibliotheque dojo fournit un ensemble riche de 
composants graphiques allant de composants elementaires a des composants plus complexes, 
tels que arbres et tableaux. 

La bibliotheque dojo simplifie 1' utilisation des modules decrits au chapitre 7. Cet aspect 
est particulierement visible avec les modules relatifs aux techniques Ajax puisque 1' envoi 
et la reception de donnees avec ces techniques sont integres a certains composants, tels 
que ceux relatifs aux formulaires HTML. 
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La bibliotheque rialto 



A l'instar de dojo, la bibliotheque rialto offre la possibility de developper des applica- 
tions Web riches en se fondant sur une collection de composants graphiques. 

Cette bibliotheque se focalise toutefois davantage sur les applications Web pour l'infor- 
matique de gestion par 1' intermediate de divers composants et de mecanismes dedies. 

Ce chapitre detaille la maniere d'utiliser cette bibliotheque ainsi que la facon de developper 
des applications avec ses composants graphiques. 



Historique 



Avant d'entrer dans le detail de la bibliotheque et de son utilisation, nous allons dresser 
un bref historique du projet et detailler ses differents sous-projets ainsi que ses objectifs. 

Puisque le cadre de cet ouvrage est la technologie JavaScript, nous ne detaillons ici que le 
sous-projet rialto JavaScript. Les autres sous-projets offrent des fonctionnalites permet- 
tant d'utiliser le coeur de la bibliotheque JavaScript avec differentes technologies serveur. 

Realisee initialement au sein de l'lnstitut Gustave Roussy (IGR), premier centre euro- 
peen de lutte contre le cancer, a Villejuif, la bibliotheque rialto a permis de batir une 
application de consultation des dossiers des patients accessible par le Web et desormais 
utilisee par 1' ensemble du personnel medical de 1'IGR. 

L'objectif principal de ce projet etait de realiser une application Web facilement consultable 
au sein de l'hopital ainsi que par des medecins en deplacement sur d' autres sites afin de 
leur donner acces a toutes les informations de leurs patients. 
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Le second objectif de rialto etait d'offrir aux utilisateurs l'ergonomie riche a laquelle ils 
etaient habitues avec les applications de gestion en mode client-serveur deja deploy ees 
sur le site. 

Au debut du developpement de 1' application, en 2002, on ne parlait pas encore d' Ajax, et 
aucun framework de ce type n'etait disponible. 



Projets annexes 

Le sous-projet JavaScript est situe au cceur du projet rialto en ce qu'il met en oeuvre les 
implementations des composants graphiques riches. II n'en existe pas moins d'autres sous- 
projets, dont l'objectif est de faciliter l'utilisation de la bibliotheque JavaScript sous diffe- 
rentes technologies serveur. Ils consistent essentiellement en 1' encapsulation des classes 
JavaScript dans des composants ecrits dans differents langages au niveau du serveur. 

Le tableau 12.1 recapitule l'ensemble des sous-projets rialto. 
Tableau 12.1 Sous-projets rialto 

Sous-projet Description 

rialto JavaScript Cceur du projet mettant a disposition les differentes classes JavaScript du support de base et des compo- 
sants graphiques 

rialto Taglib Ensemble de taglibs facilitant l'utilisation de la bibliotheque JavaScript dans un environnement J2EE 

rialto JSF Mise en oeuvre des composants JavaScript fondee sur la technologie JSF (JavaServer Faces) afin de les 

manipuler en tant qu'objets Java 

rialto PHP Mise en oeuvre en PHP des composants JavaScript afin de faciliter leur utilisation avec cette technologie 

rialto Python Mise en oeuvre en Python des composants JavaScript afin de faciliter leur utilisation avec cette technologie 

rialto .Net Mise en oeuvre des composants JavaScript avec la technologie .Net afin de faciliter leur utilisation avec cette 

technologie 



Dans la suite de ce chapitre, nous appelons bibliotheque rialto le sous-projet relatif aux 
composants JavaScript. 



Installation 



L installation de la bibliotheque rialto consiste en 1' inclusion de divers fichiers CSS et 
JavaScript. Nous utilisons dans ce chapitre la version 0.8.6 de la bibliotheque. 

Les fichiers CSS permettent de mettre a disposition les styles et classes CSS sur lesquels la 
bibliotheque rialto se fonde pour definir 1' aspect de ses differents composants graphiques. 

Le code suivant fournit un exemple de specification de ces fichiers CSS (reperes O) : 

<html> 
<head> 
(...) 
< 1 ink rel="stylesheet" type="text/css"<-0 

href ="/ rial to-0 .8 .6/ri al toEngine/style/rial to.css"/> 
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<link id="standard_behaviour" rel="stylesheet"<-© 
type="text/css" 

href="/rialto-0.8.6/rialtoEngine/style/behavior.css"/> 
<link i d="def aul tSki n" rel="stylesheet" type="text/css"<-0 
href="/rial to-0 .8.6/rial toEngine/style/defaultSkin.css"/> 
(...) 
</head> 
(...) 
</html> 

Les fichiers JavaScript permettent de referencer les elements JavaScript de la bibliotheque. 

Le code suivant donne un exemple de specification de ces fichiers JavaScript, a savoir le 
fichier config.js (repere O) relatif a la configuration de la bibliotheque et le fichier 
rialto.js (repere ©) correspondant a ses elements : 

<html> 
<head> 
(...) 
<script type="text/javascript"<-0 

src="/rial to-0. 8.6/rial toEngine/config. js"> 
</script> 
<script type=" text/ javascript"*-© 

src=" /rial to-0. 8.6/rial toEngine/ javascript /rial to. js"> 
</script> 
(...) 
</head> 
(...) 
</html> 

Une configuration est necessaire dans le fichier config.js inclus precedemment afin de 
positionner le chemin des elements JavaScript de la bibliotheque. 

Dans ce fichier, le bloc JavaScript suivant doit etre mis a jour soit avec le chemin de la 
bibliotheque sur le serveur Web utilise (repere O), soit avec le chemin local de son repertoire 
d' installation si aucun serveur Web n'est utilise (repere ©) : 

// protocol file: absolute local path for rialtoEngine 
if (document. location. protocol ™ "file:"){ 

rial toConfig.isFilePath=true; 

rial toConfig.pathRialtoE = "file: //c:/rial to/ rial toEngine/" ;<-© 
} 

// protocol http: ; (relative path) url for rialtoEngine 
else{ 

if (document. location. protocol == "http : " ) { 
rial toConfig.isFilePath=false; 
rial toConfig.pathRialtoE = "rialtoEngine/" ; <-© 



Bien que la bibliotheque rialto soit essentiellement axee sur la mise en ceuvre de fonction- 
nalites graphiques dans des pages HTML, elle offre aussi des fonctionnalites destinees a 
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faciliter la mise en oeuvre de traitements fondes sur le langage JavaScript et les techni- 
ques Aj ax. 

Support de base 

Avant de detailler les divers mecanismes et composants mis a disposition par rialto afin 
de developper des applications graphiques, nous allons decrire les modules de base de 
cette bibliotheque. 

Le tableau 12.2 recapitule les objets relatifs au support de base. 
Tableau 12.2 Objets du support de base de rialto 



Objet 




Description 


rialto. 


lang 


Offre diverses methodes facilitant la mise en oeuvre des mecanismes de base de JavaScript. 


rialto. 


Dom 


Offre diverses methodes relatives a ('utilisation du DOM avec JavaScript. 


rialto. 


string 


Offre diverses methodes relatives a la manipulation des chaines de caracteres avec JavaScript. 


rialto. 


array 


Offre diverses methodes relatives a la manipulation des tableaux avec JavaScript. 


rialto. 


date 


Offre diverses methodes relatives a la manipulation des dates avec JavaScript. 


rialto. 


url 


Offre diverses methodes relatives a I'utilisation et la creation d'URL avec JavaScript. 



L'objet rialto. lang met a disposition diverses methodes relatives aux traitements des fonc- 
tions, des objets ainsi qu'a la verification des types. Le tableau 12.3 recapitule ces differentes 
methodes. 

Tableau 12.3 Methodes de l'objet rialto.lang 



Methode 


Parametre 


addMethods 


Un objet et un tableau 
associatif de fonctions 


extendObject 
(ou extend) 


Une classe et un tableau 
associatif de fonctions 


isArray 


Un objet 


isBoolean 


Un objet 


isDate 


Un objet 


isFunction 


Un objet 


isNumber 


Un objet 


isString 


Un objet et eventuelle- 
ment un drapeau 


isStringln 


Une chaine de caracte- 
res et un tableau 


link 


Un objet et une fonction 



Description 

Permet d'ajouter un ensemble de fonctions a un objet. 



Permet d'ajouter un ensemble de fonctions au prototype d'une classe. 

Determine si le parametre est un tableau. 

Determine si le parametre est un booleen. 

Determine si le parametre est une date. 

Determine si le parametre est une fonction. 

Determine si le parametre est un nombre. 

Determine si le premier parametre est une chaine de caracteres. Le second 
parametre est optionnel et specifie si la chaine doit etre non nulle. 

Determine si une chaine de caracteres est contenue dans un tableau. 

Retourne une fonction permettant d'executer la fonction en parametre dans le 
contexte de l'objet en parametre. 
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Comme l'indique le code suivant, la methode link (repere O) permet de lier une fonction a 
un objet et de resoudre ainsi les problemes relatifs au mot-cle this ; l'execution de la fonction 
est desormais realisee (repere ©) dans le contexte de l'objet specifie : 

// Definition d'une fonction utilisant le mot-cle this 
function getAttribut( ) { 
return this.attribut; 
} 

// Definition d'un objet possedant un attribut nomme attribut 
var unObjet = (} ; 

unObjet. attribut = "La valeur de mon attribut"; 
// Liaison de la fonction getAttribut a l'objet unObjet 
var getAttributLiee = rial to.lang.l ink(unObjet, getAttribut) ;<-© 
// Execution de la fonction dans le contexte de l'objet 
var retour = getAttributLiee( ) ; <-© 
// retour contient la valeur « La valeut de mon attribut » 

Comme l'indique le code suivant, les methodes extendObject et addMethods offrent la 
possibilite d'affecter des attributs et des fonctions respectivement au prototype d'un objet 
et a l'objet lui-meme : 

// Definition d'une classe 
function MaClasse( ) { 
} 

// Ajout de methodes a son prototype 
rialto.lang.extendObject(MaCl asse, { <-© 
methodel: functionO { 
(...) 



var unObjet = new MaClasseO; 

// Ajout de methodes a l'objet unObjet 

rial to. lang. addMethods (unObjet, { <-© 

methode2: functionO { 
(...) 

) 
)); 

// Execution des methodes de l'objet 
unObjet. methodeK ) ; 
unObjet. methode2( ) ; 

Dans le code ci-dessus, les methodes ajoutees au prototype (repere O) de la classe MaClasse 
sont partagees par toutes ses instances, tandis que les methodes ajoutees a l'objet unObjet 
(repere ©) lui sont specifiques. 

Les fonctions dont le nom debute par is offrent la possibilite de detecter le type d'une 
variable, comme dans le code suivant : 

I var tableau = []; 
alert(rial to.l ang.isArray(tableau) ) ; // Affiche true 
al ert( rial to.l ang.isFunction(tableau) ) ; // Affiche false 
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var booleen = true; 

alerttrial to.l ang.isBoolean(booleen) ) ; // Affiche true 

var chaine = "Ceci est un test"; 

alerttrial to.l ang.isString(chaine) ) ; // Affiche true 

L'objet ri al to . Dom met a disposition des methodes relatives a la manipulation d'elements 
en se fondant sur la technologie DOM. Le tableau 12.4 recapitule ces differentes methodes. 

Tableau 12.4 Methodes de l'objet rialto.Dom 

Methode Parametre Description 

1 sCoveredBy Deux nceuds Determine si le premier nceud est positionne au-dessus de I'autre . 

1 sDescendantOf Deux nceuds Determine si le premier nceud est un enfant direct ou non du second. Le drapeau specifie 

et un booleen si les deux nceuds peuvent etre identiques. 

Le code suivant fournit un exemple de mise en ceuvre de la methode i sDescendantOf 
(repere O) arm de determiner si le noeud d'identifiant monParagraphe (repere ©) est un 
descendant du noeud d'identifiant monDiv (repere ©) : 

<html> 
<head> 

<script 1 anguage="JavaScript" type="text/javascript"> 
function testRial toDOMIsDescendantOf ( ) ( 

var monDiv = document. getElementByldC'monDi v") ; 
var monParagraphe 

= document. get Element By Id ("monParagraphe") ; 
var retour = rial to.Dom.isDescendantOf ( <-© 

monParagraphe, monDiv); 
// retour contient la valeur true 
} 
</script> 
</head> 
<body> 

<div id="monDiv"><-© 
<div> 

<p id="monParagraphe"><-© 
Ceci est un paragraphe. 
</p> 
</div> 
</div> 
</body> 
</html> 

L'objet rial to. string met a disposition diverses methodes relatives a la manipulation de 
chaines de caracteres, methodes recapitulees au tableau 12.5. 



La bibliotheque rialto 



Chapitre 12 



Tableau 12.5 Methodes de lobjet rialto.string 



Methode 


Parametre 


Description 


fortnatHTTP 


Une chaine de caracteres 


Permet d'encoder au format d'une URL les caracteres d'une chaine de 
caracteres. 


replace 


Une chaine de caracteres, le motif 
a remplacer et le nouveau motif 


Permet de remplacer toutes les occurrences d'un motif specifie par un 
autre. 


trim 


Une chaine de caracteres 


Permet de supprimer les espaces au debut et a la fin de la chaine de 
caracteres passee en parametre. 



Comme l'indique le code suivant, les methodes trim et repl ace permettent de manipuler 
une chaine en enlevant respectivement les espaces l'entourant (repere O) et en remplacant 
divers de ses motifs par d'autres (repere ©) : 

var uneChaine = " Ceci est une chaine de caracteres"; 

// Suppression des espaces en debut et fin de chaine 

uneChaine = rial to.lang.trim(uneChaine) ; <-© 

/* uneChaine contient la chaine de caracteres 

« Ceci est une chaine de caracteres » */ 

// Remplacement d'un motif par un autre 

uneChaine = rial to.lang.replacetuneChaine, "une", "ma");<-© 

/* uneChaine contient la chaine de caracteres 

« Ceci est ma chaine de caracteres » */ 

Dans le code suivant, la methode formatHTTP permet d'encoder les differents caracteres 
(repere O) d'une chaine de caracteres : 

var uneChaine = " Ceci est une chaine de caracteres"; 

uneChaine = rial to. string. formatHTTP(uneChaine) ; <-© 

/* uneChaine contient la chaine de caracteres 

« X20%20%20%20Ceci%20est%20ma%20cha%EEne%20de%20caract%E8res » */ 

L' objet rial to. array met a disposition diverses methodes relatives a la manipulation des 
tableaux, methodes recapitulees au tableau 12.6. 

Tableau 12.6 Methodes de lobjet rialto.array 



Methode 


Parametre 


add 


Un tableau 
et un objet 


arrayToString 


Un tableau 


copy 


Un tableau 


indexOf 


Un tableau 
et un objet 


insert 


Un tableau, un 
indice et un objet 


remove 


Un tableau et un 
objet 


sort 


Un tableau 



Description 

Ajoute I'element passe en parametre a la fin d'un tableau si ce dernier ne le contient 
pas deja. 

Retourne une representation sous forme de chaine de caracteres d'un tableau. 

Cree et retourne un nouveau tableau contenant tous les elements du tableau en parametre. 

Retourne I'indice d'un element dans un tableau si ce dernier le contient. Dans le cas 
contraire, la methode retourne -1. 

Insere I'element passe en parametre dans un tableau pour un indice specifie. 
Supprime I'element passe en parametre d'un tableau si ce dernier le contient. 
Trie les elements d'un tableau par ordre alphabetique descendant. 
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Le code suivant fournit un exemple de mise en oeuvre des methodes add et indexOf afin 
d'ajouter un element dans un tableau (repere O) et de determiner ensuite sa position 
(repere ©) : 

var tableau = [ "element!.", "element2", "element3" ]; 
rial to. array .add (tableau, "element4" ) ; <-© 
var longueurTableau = tableau. length; 
var indice = rialto. array. indexOf ("element4" ); <-© 
/* indice contient la valeur 3 puisque 1 'element a ete ajoute 
en fin de tableau */ 

L'objet ri al to .date met a disposition des methodes relatives a la manipulation des dates. 
Le tableau 12.7 recapitule ces differentes methodes. 

Tableau 12.7 Methodes de l'objet rialto.date 



Methode 


Parametres 


Description 


add 


Une chaine de caracteres, 
une date et une duree 


Ajoute une duree a une date. Cette duree peut etre une annee, un 
nombre de mois ou de jours. La chaine de caracteres en parametre 
permet de specifier le type de duree utilisee. Les valeurs possibles 
sont year (annee), month (mois) et day (jour). 


DDMMYYYYfromYYYYMMDD 


Une chaine de caracteres 
representant une date 


Convertit la chaine de caracteres en parametres d'un format DD/MM/ 
YYYY dans un format YYYY/MM/DD. Les sigles DD, MM et YYYY corres- 
pondent aux memes elements que precedemment. 


equals 


Deux dates 


Compare deux dates en se fondant uniquement sur les jour, mois et 
annee. 


getBornes 


Un numero de semaine 


Retourne un tableau contenant les dates de debut et de fin de la 
semaine dont le numero est passe en parametre. 


getDDMMYYYY 


Une date 


Retourne une representation sous forme de chaine de caracteres de 
la date passee en parametre. La methode se fonde sur le format DD/ 
MM/YYYY, ou DD correspond au numero du jour, MM au numero du mois 
et YYYY a I'annee. 


getLibJour 


Une date 


Retourne le nom du jour de la date en parametre en anglais. 


getWeekNumber 


Une date 


Retourne le numero de la semaine dans I'annee de la date en parametre. 


getYYYYMMDD 


Une date 


Retourne une representation sous forme de chaine de caracteres de 
la date passee en parametre. La methode see se fonde sur le format 
YYYY/MM/DD, ou les sigles DD, MM et YYYY correspondent aux memes 
elements que precedemment. 


isBissextile 


Une nombre entier 


Determine si une annee est bissextile. 


isDate 


Une chaine de caracteres 


Determine si une chaine de caracteres est au format DD/MM/YYYY. Les 
sigles DD, MM et YYYY correspondent aux memes elements que prece- 
demment. 


setDateFromYYYYMMDD 


Une chaine de caracteres 
representant une date 


Retourne une date initialiser a partir de la chaine de caracteres en 
parametre fondee sur le format YYYY/MM/DD. Les sigles DD, MM et YYYY 
correspondent aux memes elements que precedemment. 


toDay 


- 


Retourne un objet sur la date courante. 


YYYYMMDDfromDDMMYYYY 


Une chaine de caracteres 
representant une date 


Convertit la chaine de caracteres en parametres d'un format YYYY/MM/ 
DD dans un format DD/MM/YYYY. Les sigles DD, MM et YYYY correspon- 
dent aux memes elements que precedemment. 
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Plusieurs methodes de l'objet rial to. date sont mises a disposition afin de convertir des 
dates en chaines de caracteres et inversement. Le code suivant illustre la mise en ceuvre 
des methodes getDDMMYYYY (repere O) et setDateFromYYYYMMDD (repere ©) afin de realiser ces 
conversions de type : 

var date = new Date(2006, 8, 10); 

// date correspond au 10 septembre 2006 

var chaine = rialto. date. getDDMMYYYY(date) ; <-© 

// chaine contient la valeur 10/09/2006 

var uneAutreDate = rial to. date. setDateFromYYYYMMDDC'20060910" ); <-© 

// uneAutreDate correspond au 10 septembre 2006 

La methode add permet quant a elle d'ajouter des durees a une date, comme dans le code 
suivant : 

var date = new Date(2006, 8, 10); 
var nouvelleDate = rial to. date. addC'month" , date, 1); 
/* nouvelleDate correspond a la date du jour a laquelle un 
mois a ete ajoute */ 

L'objet ri al to . url met a disposition des methodes afin d'acceder aux informations contenues 
dans l'adresse d'une page Web. Le tableau 12.8 recapitule ces differentes methodes. 



Methode 

getArrayParameter 

getObjectParameter 

getSearch 

getUrl 



Tableau 12.8 Methodes de l'objet rialto.url 

Description 

Retourne un tableau contenant les differents parametres de la page courante. Chacun de ses elements 
correspond a un tableau contenant la cle et la valeur des parametres. 

Retourne un objet contenant les differents parametres de la page courante. Les attributs de l'objet cor- 
respondent aux noms des propriet.es. 

Retourne la chaine des parametres de la page courante dans le format suivant : 
parametrel=valeurl&parametre2=valeur2. 

Retourne l'adresse de la page courante. 



Le code suivant met en oeuvre les differentes methodes du tableau 12.8 afin d'avoir acces 
aux informations relatives a l'adresse de la page (repere O) et a la chaine des parametres 
de la page par l'intermediaire d'une chaine de caracteres (repere ©) : 

/* L'adresse de la page saisie dans le navigateur est : 

http:// local host/ jsweb2.0/test. html ?paraml=valeurl&param2=valeur2 

*/ 

var adressePage = rial to.url .getUrl ( ) ; <-0 

/* la variable adressePage contient la valeur 

« http://localhost/jsweb2.0/test.html?paraml=valeurl&param2=valeur2 » */ 

var parametresPage = rialto. url .getSearch( ); <-© 

/* la variable parametresPage contient la valeur 

« paraml=valeurl&param2=valeur2 » */ 
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Support des techniques Ajax 

La bibliotheque rial to foumit la classe r i alto. io.Aj ax Request afin de faciliter la mise en oeuvre 
des techniques Ajax fondees sur la classe XMLHttpRequest. La classe rialto.io.AjaxRequest 
englobe tous les mecanismes et le cycle de ce type de requete en mode asynchrone. 

Le tableau 12.9 recapitule les differents parametres du constructeur de la classe 

rial to. io.AjaxRequest. 

Tableau 12.9 Parametres du constructeur de la classe rialto.io.AjaxRequest 



Parametre 


Type 


Description 


cal 1 BackObjectOn Failure 


Un objet 


Correspond a I'objet sur lequel est executee la fonction de rappel 
lors d'un echec. 


cal 1 BackObjectOnSuccess 


Un objet 


Correspond a I'objet sur lequel est executee la fonction de rappel 
lors d'un succes. 


canBeCancel 


Un booleen 


Specifie si la requete peut etre annulee au cours de son execution. 


method 


Une chaine de caracteres 


Correspond a la methode HTTP avec laquelle la requete est 
executee. 


onFailure 


Une fonction 


Correspond a la fonction de rappel appelee lors de I'echec de la 
requete. 


onSuccess 


Une fonction 


Correspond a la fonction de rappel appelee lors du succes de la 
requete. 


url 


Une chaine de caracteres 


Correspond a I'adresse de la ressource sur laquelle est executee 
la requete. 


withWaitWindow 


Un booleen 


Specifie si une fenetre d'attente doit etre affichee lors de I'execution 
de la requete. 



L execution de la requete se realise par le biais de la methode load, methode prenant en 
parametre une chaine de caracteres contenant les donnees en entree. 

Le code suivant donne un exemple de la facon d'initialiser (repere O) puis d'executer 
(repere 0) une requete Ajax fondee sur cette classe : 

function traiterDonnees(requete) ( (...) } 
function traiterErreurs(requete) { (...) } 
var requete = new rial to.io.AjaxRequest( {<-€> 

url : "/ajax. html " , 

method: "get", 

withWaitWindow: true, 

onSuccess: traiterDonnees, <-© 

onFailure: traiterErreurs<-© 
}); 

var parametres = "parametrel=valeurl&parametre2=valeur2" ; 
requete. load (parametres) ; <-0 

Ce code se fonde sur le constructeur de la classe afin d'initialiser les fonctions de rappel 
en cas de succes de la requete (repere ©) et en cas d'echec (repere ©). Ces dernieres 
prennent en parametre un objet de type XMLHttpRequest correspondant a la requete courante. 
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Prenons l'exemple d'une fonction de rappel dont le role est de recuperer les informations 
contenues dans la reponse. Cette fonction se fonde sur une reponse au format JSON dont 
le contenu est decrit par le code suivant : 



{ 



"donnees": { 

"donneel": "valeurl" 
"donnee2": "valeur2" 



Le code suivant donne un exemple de la maniere d'implementer la fonction de rappel afin 
de recuperer les informations contenues dans la reponse au format JSON : 



function t ra iter Donnees ( request)! 

eval ("var objetReponse="+request. responseText) 

var donnees = objetReponse. donnees ; 

// Recuperation des donnees de la reponse 

var donneel = donnees .donneel ; 

// donneel contient la valeur « valeurl » 

var donnee2 = donnees .donnee2; 

// donnee2 contient la valeur « valeur2 » 



Notons que la bibliotheque rialto offre egalement la possibility de mettre en oeuvre les 
techniques Ajax en se fondant sur une iframe cachee. 



Composants graphiques 

Maintenant que nous avons aborde les fondements de la bibliotheque rialto, avec ses 
objets utilitaires de base et son support des techniques Ajax, nous allons nous concentrer 
sur son support graphique. 



Structuration des composants 

Un composant graphique de rialto correspond a une classe JavaScript qui manipule la 
structure en memoire de la page Web afin de definir sa structure ainsi que son apparence, 
ce dernier aspect se fondant sur des styles CSS. 

La bibliotheque rialto structure les composants graphiques en se fondant sur deux classes 
de base abstraites, les classes AbstractComponent et AbstractContainer. 

La premiere correspond a la classe de base de tous les composants graphiques de rialto, 
quel que soit leur type. Elle met a disposition diverses proprietes relatives a la taille, au 
positionnement et a 1' aspect des composants. 

La seconde classe l'etend afin de definir la classe de base des composants pouvant en 
contenir d'autres. Elle ajoute a cet effet des methodes d'ajout et de suppression de 
composants imbriques. 
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La figure 12.1 illustre la relation entre ces deux classes ainsi que leurs differentes mefhodes. 



Figure 12.1 

Les classes de base 
AbstractComponent 
et AbstractContainer 



AbstractComponent 



+moveTo() 

+setLeft() 

+setTop() 

+setWidth() 

+setHeight() 

+setVisible() 

+setDraggable() 

+setPosition() 

+setStyle() 

+placeln() 

+remove() 

+getHtmlExt() 

+getHtmllmp() 

+getHtmlDD() 

+getHtmlRZ() 



4 





AbstractContainer 






r 


+add() 

+removeContents() 

+getHtmlCont() 



En se fondant sur ces deux classes, rialto met a disposition un ensemble de composants 
graphiques predefinis, dont l'objectif est de mettre en oeuvre des interfaces graphiques 
Web elaborees. Ces composants permettent de repondre aux principales problematiques 
de ce type d' application. 

Le tableau 12.10 recapitule les differentes families de composants graphiques mis a 
disposition par la bibliotheque rialto. 

Tableau 12.10 Families de composants graphiques de la bibliotheque rialto 

Famille Description 

Composants de base Correspondent aux composants elementaires des formulaires tels que les champs de saisie, les 

boites de selection ou les boutons. 

Gestion des formulaires Correspond au support des formulaires afin de soumettre les donnees en se fondant sur une 

requete normal ou Ajax. 

Gestion du positionnement Correspond aux composants materialisant des zones et permettant de les positionner dans une 
page Web. 

Fenetres Correspondent aux composants graphiques permettant d'afficher des fenetres dans une page Web. 

Composants complexes Correspondent aux composants permettant de mettre en ceuvre des tableaux et des arbres. 



Nous allons detailler les specificites de ces differents composants ainsi que la facon de 
les mettre en oeuvre dans une application JavaScript. Notons que le site du projet rialto 
fournit une application de demonstration en ligne de la bibliotheque JavaScript rialto. 
Cette application est disponible a l'adresse http://rialto.application-servers.com/demoRialto.jsp. 
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Composants de base 

Les composants de base de la bibliotheque rialto correspondent a des elements elemen- 
taires de formulaire tels que des labels, des zones de saisie et des boites de selection, 
permettant de mettre en ceuvre divers ecrans de saisie dans des pages Web. 

La figure 12.2 illustre les differentes classes relatives a la mise en oeuvre des composants 
de ce type. 



Label 



-setTextQ 

-setVisibleQ 

-setEnableQ 



Text 



AbstractComponent 



-moveTof) 

-setLeft() 

■setTop() 

■setWidth() 

-setHeightQ 

■setVisible() 

■setDraggable() 

■setPosition() 

■setStyle() 

■placelnf) 

■removeO 

-getHtmlExtO 

■getHtmllmpO 

■getHtmlDDf) 

■getHtmlRZO 



E 



■displayMessage() 

■hasChanged() 

-setEnableQ 

■getValue() 

■setValue() 

-showAsRequired() 

■setFocus() 

■onblur() 

■onfocus() 

■removeAsRequiredO 



Combo 



-addltem() 

-setEnablef) 

-setVisible() 

-selFirst() 

-selLast() 

-sellndQ 

-getText() 

-onclick() 

-getSelText() 

-getSelValue() 

-selWithTextf) 

-selWithValue() 




Checkbox 



■setEnablef) 
■setCheckf) 
-getCheck() 
■onclickf) 



Image 



+setLimReac() 

+setVisible() 

+setEnable() 

+setlmageReference() 

+setlmages() 

+setAlt() 

+onclick() 



Radio 



+setCheck() 
+getCheck() 
+onclick() 
+setEnable() 



Figure 12.2 

Classes des composants graphiques de base 
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Le tableau 12.11 recapitule les differentes classes des composants graphiques de base 
mis a disposition par la bibliotheque rialto. 

Tableau 12.11 Composants graphiques de base de la bibliotheque rialto 



Composant 


Description 


rial to. widget .Button 


Correspond a un bouton. 


rial to. widget .Checkbox 


Correspond a une case a cocher. 


rial to. widget .Combo 


Correspond a une boite de selection. 


rial to. widget . Image 


Correspond a une image. 


rial to. widget . Label 


Correspond a une zone de texte non editable permettant de definir un libelle. 


rial to. widget .Radio 


Correspond a une case d'option. 


rial to. widget. Text 


Correspond a une zone de saisie de texte. 



Tous ces composants peuvent etre ajoutes et relies a des zones dans une page Web en se 
fondant sur leur parametre de constructeur parent, parametre permettant de faire reference 
a cette zone. Ces composants sont positionnes de maniere absolue dans une zone a partir 
de son coin superieur gauche. 

Le composant rialto. widget. Label correspond a une zone de texte non editable et est 
couramment utilise arm de mettre en oeuvre des etiquettes. II est generalement associe a 
des zones de saisie et de selection. 

Le tableau 12.12 recapitule les differents parametres du constructeur de cette classe. 
Tableau 12.12 Parametres du constructeur de la classe rialto.widget.Label 



Parametre 


Type 


Description 


name 


Une chaine de caracteres 


Correspond au nom du composant 


top 


Un nombre entier 


Correspond au positionnement vertical du composant. 


left 


Un nombre entier 


Correspond au positionnement horizontal du composant. 


parent 


Un objet 


Correspond a un composant rialto ou un conteneur HTML classique auquel est 
rattache le composant. 


text 


Une chaine de caracteres 


Correspond au texte affiche par le composant. 


cl assName 


Une chaine de caracteres 


Correspond a la classe CSS associee. 



Le code suivant fournit un exemple de mise en oeuvre d'un composant de ce type : 

Ivar libelle = new rial to. widget. Label ( 
"monLibel le" , 15, 10, cadre, 
"Texte du libelle", "cl asseLibel le" ) ; 

Le composant ri al to . wi dget . Text correspond a une zone dans laquelle l'utilisateur peut saisir 
un texte. II offre la possibilite de controler automatiquement le type des donnees saisies. 
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Les tableaux 12.13 et 12.14 recapitulent respective ment les differents parametres du 
constructeur de cette classe ainsi que les proprietes de son tableau associatif. 



Tableau 12.13 Parametres du constructeur de la classe rialto.widget.Text 



Parametre 


Type 


Description 


name 


Une chaine de caracteres 


Correspond au nom du composant. 


top 


Un nombre entier 


Correspond au positionnement vertical du composant. 


left 


Un nombre entier 


Correspond au positionnement horizontal du composant. 


width 


Une chaine de caracteres 


Correspond a la largeur du composant. Peut etre exprime aussi bien sous 
forme de nombre que de pourcentage. 


dataType 


Une chaine de caracteres 


Correspond au type de donnees que peut contenir le composant. Les valeurs 
suivantes sont possibles : 

- A : peut contenir des caracteres alphanumeriques. 

- N : peut contenir des nombres. 

- D : peut contenir des dates. 

- H : peut contenir des heures. 

- P : peut contenir un mot de passe. 

- Hi : correspond a un champ cache. 

- T : correspond a un composant de type texta rea . 


parent 


Un objet 


Correspond a un composant rialto ou un conteneur HTML classique auquel 
est rattache le composant. 


parameters 


Un tableau associatif 


Contient les proprietes recapitulees au tableau 12.14. 



Tableau 12.14 Proprietes du tableau associatif parameters 
du constructeur de la classe rialto.widget.Text 



Propriete 


Type 


Description 


accessKey 


Un caractere 


Specifie un caractere utilise conjointement avec la touche ALT afin de lui 
donner le focus. 


autollp 


Un booleen 


Specifie si le texte saisi doit etre automatiquement mis en majuscules. 


disable 


Un booleen 


Specifie si la zone est desactivee. 


initVal ue 


Une chaine de caracteres 


Correspond a la valeur initiale du champ. 


isRequi red 


Un booleen 


Specifie si le champ est obligatoire. Si tel est le cas, une etoile rouge est 
ajour.ee automatiquement a cote du champ. 


rows 


Un nombre entier 


Specifie le nombre de lignes maximal si le composant est de type textarea. 


tablndex 


Un nombre entier 


Specifie I'ordre de passage du champ par tabulation. 



Le code suivant met en oeuvre un composant de ce type afin de definir une zone de saisie : 



var texte = new rialto. widget. Text( 

"monTexte", 10, 



100, "A", cadre, 



autollp: false, isRequired: false, 
disable: false, rows: 5, accessKey: 
tablndex: "", initValue: "" 



}); 
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Dans le cas ou le type de donnees correspond a une date, une icone est automatiquement 
ajoutee a cote du champ de saisie. Cette derniere permet l'affichage d'un calendrier afin 
de selectionner une date. 

La figure 12.3 illustre l'apparence de ce calendrier. 
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Figure 12.3 

Apparence du calendrier 

Le composant rialto. widget. Checkbox correspond a une case a cocher. Le tableau 12.15 
recapitule les differents parametres de son constructeur. 

Tableau 12.15 Parametres du constructeur de la classe rialto.widget.Checkbox 



Parametre 


Type 


Description 


name 


Une chaine de caracteres 


Correspond au nom du composant. 


top 


Un nombre entier 


Correspond au positionnement vertical du composant. 


left 


Un nombre entier 


Correspond au positionnement horizontal du composant. 


parent 


Un objet 


Correspond a un composant rialto ou un conteneur HTML classique auquel 
est rattache le composant. 


text 


Une chaine de caracteres 


Correspond au texte affiche par le composant. 


checked 


Un booleen 


Specifie si le composant est coche. 


className 


Une chaine de caracteres 


Correspond a la classe CSS associee. 



Le code suivant met en ceuvre un composant de ce type : 

Ivar caseACocher = new rial to. widget. Checkbox( 
"caseACocher" , 15, 230, cadre, 
"Case a cocher", false, "libellel"); 

Le composant rialto. widget. Radio correspond a une case a cocher qui peut etre rattachee 
a un groupe de boutons. Ainsi, une seule case a cocher peut etre selectionnee dans ce 
groupe. 

Le tableau 12.16 recapitule les differents parametres de son constructeur. 
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Tableau 12.16 Parametres du constructeur de la classe rialto.widget.Radio 



Parametre 


Type 


Description 


name 


Une chaine de caracteres 


Correspond au nom du composant. 


top 


Un nombre entier 


Correspond au positionnement vertical du composant. 


left 


Un nombre entier 


Correspond au positionnement horizontal du composant. 


parent 


Un objet 


Correspond a un composant rialto ou un conteneur HTML classique auquel 
est rattache le composant. 


group 


Une chaine de caracteres 


Specifie le nom du groupe de boutons auquel le composant est rattache. 
Dans ce groupe, une seule case a cocher est selectionnee. 


text 


Une chaine de caracteres 


Correspond au texte affiche par le composant. 


checked 


Un booleen 


Specifie si le composant est coche. 


cl assName 


Une chaine de caracteres 


Correspond a la classe CSS associee. 



Le code suivant met en oeuvre des composants de ce type dans un groupe appele groupe- 
Boutons : 

var boutonRadiol = new rial to. widget. Radio( 

"boutonRadiol". 100, 120, cadre, 

"groupeBoutons" , "Bouton radio 1", 

true, "1 ibNormal " ) ; 
var boutonRadio2 = new rial to. widget. Radio( 

"boutonRadio2", 100, 120, cadre. 

"groupeBoutons", "Bouton radio 2", 

true, "1 ibNormal ") ; 

Le composant rial to. widget. Combo correspond a une boite de selection pour une liste de 
valeurs. 

Les tableaux 12.17 et 12.18 recapitulent respectivement les differents parametres du 
constructeur de cette classe ainsi que les proprietes de son tableau associatif. 



Tableau 12.17 Parametres du constructeur de la classe rialto.widget.Combo 



Parametre 


Type 


Description 


tabVal lies 


Un tableau dont les elements 
sont des tableaux. 


Specifie la liste des valeurs contenues dans la liste. 


name 


Une chaine de caracteres 


Correspond au nom du composant. 


top 


Un nombre entier 


Correspond au positionnement vertical du composant. 


left 


Un nombre entier 


Correspond au positionnement horizontal du composant. 


width 


Une chaine de caracteres 


Correspond a la largeur du composant. 


parent 


Un objet 


Correspond a un composant rialto ou un conteneur HTML classique auquel 
est rattache le composant. 


parameters 
I 


Un tableau associatif 


Contient les proprietes reoapitulees au tableau 12.18. 
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Tableau 12.18 Proprietes du tableau associatif parameters 
du constructeur de la classe rialto.widget.Combo 



Propriete 


Type 


Description 


suggest 


Un booleen 


Specifie si la liste doit s'affiner en fonction de la saisie. 


heightltem 


Un nombre entier 


Specifie la largeur d'un element dans la liste. 


enable 


Un booleen 


Specifie si la zone est activee. 



Le code suivant met en oeuvre un composant de ce type en specifiant ses differentes 
proprietes (repere O) et en definissant les valeurs qu'il contient (repere ©) ainsi que la 
valeur selectionnee (repere ©) dans la liste : 

var boiteSelection = new rial to. widget. Combo( <-© 

"", "boiteSelection", 70, 120, 80, cadre, 
{ suggest:true, enable:true, heightltem:0 }); 

sexe.addltem( "1" , "Valeur 1") ; <-© 

sexe.addltem("2", "Valeur 2"); 

sexe.addltem( "3" , "Valeur 3") ; 



sexe.selWithVal ue( "Valeur 3" ) ; 



© 



Le composant rialto. widget. Image correspond a une image. Les tableaux 12.19 et 12.20 
recapitulent respectivement les parametres du constructeur de cette classe ainsi que les 
proprietes de son tableau associatif. 

Tableau 12.19 Parametres du constructeur 
de la classe rialto.widget.lmage 



Parametre 


Type 


Description 


imageOut 


Une chaine de caracteres 


Correspond au chemin de I'image ou de la classe CSS de I'image. 


top 


Un nombre entier 


Correspond au positionnement vertical de I'image. 


left 


Un nombre entier 


Correspond au positionnement horizontal de I'image. 


parent 


Un objet 


Correspond a un composant rialto ou a un conteneur HTML classique auquel 
est rattache le composant. 


alternate- 
Text 


Une chaine de caracteres 


Correspond au texte affiche lorsqu'on passe sur I'image. 


imageOn 


Une chaine de caracteres 


Correspond au chemin de I'image ou de la classe CSS utilisee lorsque le 
pointeur passe au-dessus de I'image. 


parameters 


Un tableau associatif 


Contient les proprietes recapitulees au tableau 12.20. 


Tableau 1 2.20 Proprietes du tableau associatif parameters 
du constructeur de la classe rialto.widget.lmage 


Propriete 


Type 


Description 


imageDisabl 


ed Une chaine 
de caracteres 


Specifie le chemin d'une image ou une classe CSS correspondant a I'image 
lorsqu'elle est desactivee. 



La bibliotheque rialto 



Chapitre 12 



Le code suivant met en oeuvre un composant de ce type : 

var image = new rialto. widget. Imaget 

"transparent3.gif", 310, 30, 
cadre, "image", "", 
{ imageDisabled: "" )); 

Le composant rialto. widget. Button correspond a un bouton qui peut etre utilise afin de 
declencher des traitements lors d'un clic. 

Les tableaux 12.21 et 12.22 recapitulent respectivement les parametres du constructeur 
de cette classe ainsi que les proprietes de son tableau associatif. 

Tableau 12.21 Parametres du constructeur de la classe rialto.widget.Button 



Parametre 


Type 


Description 


top 


Un nombre entier 


Correspond au positionnement vertical du composant. 


left 


Un nombre entier 


Correspond au positionnement horizontal du composant. 


title 


Une chaine de caracteres 


Correspond au titre du composant. 


alt 


Une chaine de caracteres 


Correspond au texte affiche lorsque le curseur passe sur le composant. 


parent 


Un objet 


Correspond a un composant rialto ou a un conteneur HTML classique auquel 
est rattache le composant. 


parameters 

I . 


Un tableau associatif 


Contient les proprietes recapitulees au tableau 12.22. 


Tableau 12.22 Proprietes du tableau associatif parameters 
du constructeur de la classe rialto.widget.Button 


Propriete 


Type 




adaptTotext 


Un booleen 


Specifie si la longueur du bouton est proportionnelle a son texte. 


enable 


Un booleen 


Specifie si la zone est activee. 


widthMin 


Un nombre entier 


Correspond a la longueur minimale du bouton. 


width 


Un nombre entier 


Correspond a la longueur fixe du bouton. 



Le code suivant met en oeuvre un composant de ce type : 

var bouton = new rialto. widget. Button( 

250, 30, "Texte", "Texte", cadre, 
{ enable:true, adaptToText:true, 
width: 88, widthMin: 88 }); 

Le code suivant montre comment utiliser conjointement les differents composants 
graphiques decrits dans cette section, a savoir les etiquettes (repere ©), les zones de texte 
(repere ©), les cases a cocher (repere 0), les boites de selection (repere ©), les cases 
d'option (repere ©) ainsi que les boutons (repere 0) afin de definir un formulaire de 
saisie d' informations : 
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var cadre = new rialto. widget. Frame( {<-© 

name: "cadre" , title: "Informations", 
open:true, dynamic:false, 
position: "relative", 
draggable:false, parent:popup }); 

var libelleNom = new rial to. widget. Label ( <-© 

"libelleNom" , 15, 10, cadre, "Norn", "libelle 
var nom = new rial to. widget. Text( <-© 

"textNom", 10, 120, 100, "A", cadre, 

{ autoUp:false, isRequi red:false, 
disable:false, rows:5, accessKey: "" , 
tab Index: "" , initValue: ""} ) ; 
var nomJeuneFil le = new rial to. widget. Checkboxt <-0 

"nomJeuneFil le" , 15, 230, cadre, 

"Nom de jeune fille", false, "libellel"); 
var 1 ibellePrenom = new rialto. widget. Label (<-© 

"libellePrenom" , 45, 10, cadre, 

"Mot de passe", "libellel"); 
var prenom = new rial to. widget. Text( <-© 

"prenom", 40, 120, 100, "P", cadre, 

( autoUp:false, isRequi red:false, 
disable:false, rows:5, 
accessKey:"", tablndex:"", initValue:""}); 
var libelleSexe = new rial to. widget. Label ( <-© 

"libelleSexe" , 70, 10, cadre, 

"Sexe", "libellel"); 
var sexe = new rial to. widget. Combot <-© 

"", "SEXE", 70, 120, 80, cadre, 

( suggest:true, enable:true, heightltem:0 }] 
sexe.addltem( "M" , "Masculin") ; 
sexe.addltem( "F" , "Feminin") ; 
sexe.addltem( "?" , "Non connu" ) ; 
sexe.selWithVal ueC'Mascul in" ) ; 
var 1 ibelleLieuHabitation - new rialto. widget. Label ( <-© 

"libelleLieuHabitation" , 100, 10, cadre, 

"Lieu d' habitation" , "libellel"); 
var nord = new rial to. widget. Radiot <-© 

"nord", 100, 120, cadre, "1 ieuHabitation" , 

"Nord", true, "1 ibNormal ") ; 
new rialto.widget.Radio( <-© 

"ouest", 130, 120, cadre, "1 ieuHabitation" , 

"Ouest", false, "1 ibNormal ") ; 
new rial to. widget. Radio( <-© 

"est", 160, 120, cadre, 

"Est", false, "libNormal 
var sud = new rial to. widget. Radio( <-© 

"sud", 190, 120, cadre, 

"Sud", false, "libNormal"); 
var pan's = new rialto. widget. Radio( <-© 

"pan's", 220, 120, cadre, "1 ieuHabitation" , 

"Region parisienne", false, "libNormal"); 



var ouest 



var est 



"lieuHabitation" , 
"); 

"1 ieuHabitation" , 
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var boutonFermeture = new rial to. widget. Button(<-@ 

250, 30, "Fermeture", "Fermer", cadre, 
{ enable:true, adaptToTextrtrue, 
width:88, widthMin:88 }); 
var boutonAide = new rial to. widget. Button( <-@ 

250, 130, "Aide", "Afficher 1'aide", cadre. 
{ enable:true, adaptToTextrtrue, 
width:88, widthMin:88 }); 

Notons que tous ces composants sont rattaches au conteneur de composants dont le nom 
d' instance est cadre (repere O). Nous detaillons la mise en oeuvre des conteneurs de 
composants dans la suite de ce chapitre. 

La figure 12.4 illustre l'apparence du formulaire de saisie d' informations decrit prece- 
demment. 
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Figure 12.4 

Formulaire de saisie d' informations 



Gestion des formulaires 

Ann de soumettre les donnees presentes dans un formulaire en se fondant sur une requete 
normale ou Ajax, la bibliotheque rialto met a disposition le composant ri a 1 to .widget . Form. 

Ce composant correspond a un conteneur de composants et peut done integrer tous les 
composants de base detailles a la section precedente. 
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Comme le montre le code suivant, la liaison se realise par le biais du parametre parent 
(reperes O) de leurs constructeurs : 

var formulaire = new rial to. widget. Form( (...) ); 
var libelleNom = new rial to. widget. Label ( 

"libelleNom", 15, 10, 

formulai re, <-0 

"Norn", "libel lei"); 

var nom = new rial to. widget. Text( 

"textNom", 10, 120, 100, "A", 
formulai re, <-0 

( autoUpifal se, isRequi redrfalse, disable:false, 
rows:5, accessKey: "" , tablndex:"", initVal ue: ""} ) ; 

Les tableaux 12.23 et 12.24 recapitulent respectivement les parametres du constructeur 
de cette classe ainsi que les proprietes de son tableau associatif. 



Tableau 12.23 Parametres du constructeur 
de la classe rialto.widget.Form 



Parametre 


Type 


Description 


name 


Une chaine de caracteres 


Correspond au nom du formulaire. 


url 


Un nombre entier 


Correspond au positionnement horizontal du composant. 


parent 


Un objet 


Correspond a un composant rialto ou un conteneur HTML classique auquel est 
rattache le composant. 


parameters 


Un tableau associatif 


Contient les proprietes recapitulees au tableau 12.24. 
I 



Tableau 12.24 Proprietes du tableau associatif parameters 
du constructeur de la classe rialto.widget.Form 



Description 

Specifie si le formulaire doit etre soumis de maniere classique (valeur false) 
ou en se fondant sur les techniques Ajax (valeur true). 

Dans le cas d'une requete Ajax, specifie si la technique fondee sur les iframes 
doit etre utilisee. Si la valeur de cette propriete est false, une requete Ajax 
fondee sur la classe XMLHttpRequest est realisee. 

Specifie si une fenetre d'attente doit etre affichee pendant I'execution de la 
requete Ajax de soumission. Ne peut etre activee lors d'une soumission clas- 
sique de formulaire. 

Specifie si la requete Ajax peut etre annulee durant son execution. 

Correspond au bouton permettant de declencher la soumission du formulaire. 

Correspond a la methode HTTP utilisee afin de soumettre le formulaire. 

Correspond a la fonction de rappel utilisee lors de I'utilisation d'une requete 
Ajax fondee sur la classe XMLHttpRequest. 



Propriete 


Type 


boolAsynch 


Un booleen 


bool If rame 


Un booleen 


boolWith- 
FenWait 


Un booleen 


canBeCancel 


Un booleen 


imgBtonSubmi t 


Une instance d'un bouton 


method 


Une chaine de caracteres 


onSuccess 


Une reference a une fonc- 
tion 
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Ce composant permet d'envoyer les donnees du formulaire de maniere classique sans 
recourir aux techniques Ajax. L'adresse specifiee dans le parametre url est alors utilisee 
afin de soumettre le formulaire. U interface graphique de la page est remplacee par celle 
construite par la ressource accedee. Cette approche se configure en specifiant la valeur 
false pour la propriete boolAsynch. 

Ce composant offre egalement la possibilite de soumettre le formulaire en se fondant sur 
les techniques Ajax. Deux approches sont en ce cas envisageables. La premiere se fonde 
sur la classe XMLHttpRequest et une fonction de rappel afin de traiter la reponse a la 
soumission. La seconde consiste a utiliser une iframe cachee. 

Avec la premiere approche, les proprietes boolAsynch (repere ©) et bool Iframe (repere 0) 
doivent respectivement contenir les valeurs true et f al se tandis que la propriete onSuccess 
(repere ©) doit referencer la fonction de rappel (repere O) a utiliser pour traiter la reponse. 
L'adresse de la requete doit toujours etre specifiee dans le parametre url (repere ©). 

Cette fonction de rappel accepte en parametre l'instance de la classe XMLHttpRequest utili- 
see afin d'executer la requete. Pour plus de detail concernant 1' utilisation d'une instance 
de ce type, voir le chapitre 5 relatif aux techniques Ajax. 

Le code suivant donne un exemple de mise en oeuvre de cette approche : 

function traiterRequete(requete) {<-© 

// Execute le code contenu dans la reponse 
try { 

eval (request. responseText) ; 
} catch(err) { 

alert(err. message) ; 



(...) 

var formulaire = new rialto. widget. FormC'subscriptionForm" , 
"/ajax/ rial to/testl. js" , <-© 
cadre, 

{ method: "POST", autoSubmit: false, 
boolWithFenWait: false, 
boolAsynch: true,*-© 
boollframe: false, <-0 
canBeCancel : true, 
onSuccess: traiterRequete, <-© 
imgBtonSubmit: null 
1); 

Le code ci-dessus definit les parametres de configuration du formulaire afin d' utiliser les 
techniques Ajax (repere ©) et plus particulierement la classe XMLHttpRequest (repere ©) 
afin d'acceder a une ressource Web (repere ©). La reponse a la soumission est traitee par 
une fonction de rappel (repere ©) que reference le formulaire (repere ©). 

Avec la seconde approche, le composant rial to . wi dget . Form offre la possibilite de se fonder sur 
une iframe cachee afin d'executer la requete Ajax de soumission du formulaire. Dans ce 
cas, la valeur de la propriete bool Iframe est true, et aucune fonction de rappel n'est necessaire. 
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Pour plus de detail concernant l'utilisation d'une iframe cachee, voir le chapitre 5 relatif 
aux techniques Ajax. 



Positionnement 



Les composants de ce type sont des conteneurs permettant de positionner les composants 
dans une page Web. Ces conteneurs peuvent s'imbriquer de maniere recursive arm de 
mettre en oeuvre des positionnements complexes. 

La figure 12.5 illustre les differentes classes relatives a la mise en oeuvre des composants 
de ce type. 
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+moveTo() 

+setLeft() 

+setTop() 

+setWidth() 

+setHeight() 

+setVisible() 

+setDraggable() 

+setPosition() 

+setStyle() 

+placeln() 

+remove() 

+getHtmlExt() 

+getHtmllmp() 

+getHtmlDD() 

+getHtmlRZ() 



AbstractContainer 



<T" 



+add() 

+removeContents() 

+getHtmlCont() 



ST 

















































Tab 




Splitter 




Frame 




SimpleWindow 










+addTabltem() 
+removeTabltem() 
+activeTab() 
+setVisible() 


+fixeProp() 


+setDisplay() 

+setTitle() 

+onSetDisplay() 


+closeFen() 
+activeFen() 
+setVisible() 
+setTitle() 




















+onSetTitle() 

+onclose() 

+onfocus() 



Figure 12.5 

Classes des composants relatifs au positionnement 



Ce support offre la possibilite de definir les differentes zones affichees dans un naviga- 
teur et de les positionner en se fondant sur un gestionnaire de positionnement redimen- 
sionnable ou des onglets. 

Panel 

La bibliotheque rialto offre la possibilite de definir des panels en se fondant sur la classe 
rialto. widget. SimpleWindow. Ces panels peuvent par la suite etre rattaches a une balise 
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HTML div. Cette derniere peut aussi bien correspondre a une balise definie en dehors de 
rialto qu'a une balise div interne d'un composant graphique de cette bibliotheque, telle 
une zone d'un gestionnaire de positionnement. 



Affichage des composants de type rialto.widget.SimpleWindow 

La bibliotheque n'autorise I'affichage que d'un seul composant de ce type dans une page Web. L'applica- 
tion ne peut done mettre en ceuvre les composants qu'en prenant en compte cet aspect. II sera possible 
dans les prochaines versions de la bibliotheque d'en afficher plusieurs simultanement. 



Le constructeur de ce composant graphique prend en parametre un tableau associatif 
contenant les proprietes recapitulees au tableau 12.25. 



Tableau 12.25 Proprietes utilisables par le constructeur de la classe rialto.widgelSimpleWin- 

dow 

Parametre Type Description 

icone Une chaine de caracteres Correspond a I'icone associee au panel, 

parent Un objet 



title 



Correspond a un composant rialto ou a un conteneur HTML classique auquel est 
rattache le composant. 

Une chaine de caracteres Correspond au titre du panel. 



Le code suivant met en ceuvre un composant de ce type (repere O) contenant la zone 
(repere ©) du formulaire de saisie : 

var fenetre = new rial to. widget. SimpieWindow( {<-© 

parent: document. body, 

title: "Un titre", 

icone: " i mages /imgFenSimple/pi cto-gr_recherchepatients.gif" 
)); 

var cadre = new rialto. widget . Framet {<- © 
name: "cadre" , 

title: "Informations", open:true, dynamic: true, 
position: "relative", draggable:fal se, parent:fenetre 



var libelleNom = new rialto. widget. Label ( 

"1 ibelleNom" , 15, 10, cadre, "Norn", "libellel"); 

var nom = new rialto. widget. Text( 

"textNom", 10, 120, 100, "A", cadre, 
( autoUp:false, isRequi red:fal se, disable:false, 
rows:5, accessKey: "" , tablndex:"", initValue: ""} ) 

(...) 
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La figure 12.6 illustre l'aspect d'un composant de ce type. 
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Figure 12.6 

Aspect d'un composant de type rialto. widget. Simple Window 



Zone 

Dans un panel, la bibliotheque rialto offre la possibility de definir differentes zones arin 
de regrouper des ensembles de composants graphiques. Cette approche se fonde sur la 
classe rialto. widget. Frame. 

Le constructeur de ce composant graphique prend en parametre un tableau associatif 
contenant les proprietes recapitulees au tableau 12.26. 

Tableau 12.26 Proprietes utilisables par le constructeur de la classe rialto.widget.Frame 



Propriete 


Type 


Description 


draggable 


Un booleen 


Specifie si la zone peut etre deplacee par une operation de glisser-deposer. 


dynamic 


Un booleen 


Specifie si la zone est dynamique ou statique. Dans le cas ou elle est dynamique 
(valeur true), elle peut etre depliee et repliee. 


height 


Une chaine de caraoteres 


Correspond a la hauteur du composant. Peut etre exprimee aussi bien sous 
forme de nombre que de pourcentage. 


left 


Un nombre entier 


Correspond au positionnement horizontal du composant. 


name 


Une chaine de caraoteres 


Correspond au nom de la zone. 


open 


Un booleen 


Specifie I'etat de la zone (ouverte ou fermee) lorsque la valeur de la propriete 
dynamic vaut true. 
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Tableau 12.26 Proprietes utilisables par le constructeur de la classe rialto.widget.Frame (suite) 



Propriete 


Type 


Description 


parent 


Un objet 


Correspond a un composant rialto ou a un conteneur HTML classique auquel est 
rattache le composant. 


position 


Une chaine de caracteres 


Specifie le mode de positionnement de la zone. 


title 


Une chaine de caracteres 


Correspond au titre affiche en haut de la zone. 


top 


Un nombre entier 


Correspond au positionnement vertical du composant. 


width 


Une chaine de caracteres 


Correspond a la largeur du composant. Peut etre exprimee aussi bien sous 
forme de nombre que de pourcentage. 



Cette zone peut contenir tous les elements simples de formulaire decrits precedemment, 
composants lui etant rattaches en se fondant sur son instance. 

Le code suivant met en oeuvre un composant de ce type (repere O), ainsi que le rattachement 
de composants (repere ©) a la zone : 

(...) 

var cadre = new rialto. widget . Frame( {<-© 

name: "cadre" , 

title: "Informations", open:true, dynamic: true, 

position: "relative", draggable:fal se, parent :fenetre 
}); 
var libelleNom - new rialto. widget. Label ( 

"libelleNom", 15, 10, 

cadre, <-© 

"Norn", "libel lei"); 
var nom - new rialto. widget. Text( 

"textNom", 10, 120, 100, "A", 

cadre, <-© 

( autoUp:false, isRequi red:fal se, disable:false, 
rows:5, accessKey: "" , tablndex:"", initValue: ""} ) ; 
(...) 
(...) 

Notons que la specification de la valeur true a la propriete dynami c permet d'afficher et de 
masquer la zone. 



Gestionnaire de positionnement redimensionnable 

Un gestionnaire de positionnement redimensionnable, ou splitter, offre la possibility de 
mettre en oeuvre deux zones dont la limite commune peut etre deplacee. L'agrandissement 
d'une zone entraine done la reduction de 1' autre. 

La bibliotheque rialto implemente ce composant graphique par le biais de la classe 
rialto. widget. Splitter, dont le constructeur prend en parametre un tableau associatif 
contenant les proprietes recapitulees au tableau 12.27. 
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Tableau 12.27 Proprietes utilisables par le constructeur de la classe rialto.widget.Splitter 



Propriete 


Type 


height 


line chaine de caracteres 


left 


Un nombre entier 


1 imlnf 


Un nombre entier 


1 imSup 


Un nombre entier 


name 


Une chaine de caracteres 


orientation 


Une chaine de caracteres 


parent 


Un objet 


prop 


Un nombre entier 


reverseClose 


Un booleen 


style 


Une chaine de caracteres 


top 


Un nombre entier 


width 


Une chaine de caracteres 



withlmg 



Un booleen 



Description 

Correspond a la hauteur du composant. Peut etre exprimee aussi bien sous 
forme de nombre que de pourcentage. 

Correspond au positionnement horizontal du composant. 

Correspond a la proportion minimale possible de la premiere zone. 

Correspond a la proportion maximale possible de la premiere zone. 

Correspond au nom de la zone. 

Specifie I'orientation du composant. Les valeurs suivantes sont possibles : 

- v : pour une orientation verticale ; 

- h : pour une orientation horizontale. 

Correspond a un composant rialto ou a un conteneur HTML classique 
auquel est rattache le composant. 

Correspond a la proportion de la premiere zone. Cette valeur est comprise 
entre et 1 . 

Specifie si le composant se ferme a droite (ou en bas dans le cas d'une 
orientation verticale) sur un die de la tirette. 

Correspond au style CSS du composant. 

Correspond au positionnement vertical du composant. 

Correspond a la largeur du composant. Peut etre exprimee aussi bien sous 
forme de nombre que de pourcentage. 

Specifie la separation des zones possedant une image. 



La mise en oeuvre de ce gestionnaire de positionnement se realise de la maniere suivante : 



var splitter 



new rialto. widget. Spl itter({ 
top: 0, left: 0, 
height: "100%", width: "100%", 
prop: 0.5, orientation: "h", 
name: "splitter", parent: document. body , 
style: "3D", T Imlnf: 0, limSup: 1, 
withlmg: true, reverseClose: false 



)); 



Ann de rattacher les zones au gestionnaire, ses proprietes divl et div2 peuvent etre utili- 
sees, proprietes representant respectivement ses parties gauche et droite (ou haute et 
basse dans le cadre d'une orientation verticale). 

Le code suivant fournit un exemple de rattachement de deux zones a la partie gauche 
(repere ©) et droite (repere ©) d'un gestionnaire (repere O) de positionnement de ce type : 



var splitter = new rialto. widget. Splitter( { (. 

var libel lei = new rialto. widget. Label ( 
"libeller, 15, 10, 
spl itter.divl, <-© 
"Premiere zone", "libellel"); 



.) });<-© 
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var libelle2 = new rial to. widget. Label ( 
"libelle2", 15, 10, 
splitter.div2,<-© 
"Seconde zone", "libellel"); 

La figure 12.7 illustre l'aspect d'un composant de ce type. 



Piemieie zone 




Figure 12.7 

Aspect d'un composant de type rialto. widget.Splitter 



Onglet 

Un gestionnaire d'onglets permet de faire cohabiter plusieurs zones tout en n'en affichant 
qu'une seule simultanement. Les onglets permettent de selectionner la zone a afficher 
dans le gestionnaire. 

La bibliotheque rialto implemente cette fonctionnalite en se fondant sur la classe 

rial to. widget. Tab Folder. 

Le constructeur de cette classe prend en parametre un tableau associatif contenant les 
proprietes recapitulees au tableau 12.28. 

Tableau 12.28 Proprietes utilisables par le constructeur de la classe rialto.widget.TabFolder 



Propriete 


Type 


Description 


autoRedimTab 


Un booleen 


Specifie si le redimensionnement automatique des titres des onglets est active. 


draggableltem 


Un booleen 


Specifie si les onglets peuvent etre deplaces par le mecanisme de glisser- 
deposer. 


height 


Une chaine de caracteres 


Correspond a la hauteur du composant. Peut etre exprime aussi bien sous 
forme de nombre que de pourcentage. 


isClosable 


Un booleen 


Specifie si les onglets peuvent etre fermes. 


left 


Un nombre entier 


Correspond au positionnement horizontal du composant. 


name 


Une chaine de caracteres 


Correspond au nom de la zone. 


parent 


Un objet 


Correspond a un composant rialto ou a un conteneur HTML classique auquel 
est rattache le composant. 


top 


Un nombre entier 


Correspond au positionnement vertical du composant. 


width 


Une chaine de caracteres 


Correspond a la largeur du composant. Peut etre exprimee aussi bien sous 
forme de nombre que de pourcentage. 


widthTabName 


Un nombre entier 


Correspond a la taille des onglets. 
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La mise en oeuvre de ce type de gestionnaire de positionnement se realise de la maniere 
suivante : 

var onglets = new rial to. widget. TabFolder( { 

name: "onglets", top: "80", left: "150", 

width: "500", height: "350", 

parent: document. body , 

widthTabName: 100, autoRedimTab: false, 

isClosable: false, draggableltem: true 
}); 

Lajout d'onglet au gestionnaire s'effectue a partir de sa methode addTabltem, qui permet de 
specifier le titre de l'onglet et s'il est active. Cette methode renvoie l'instance de l'onglet 
ajoute, instance qui peut etre utilisee afin de lui ajouter des zones et des composants. 

Le code suivant met en ceuvre cette methode (repere O) afin de creer un onglet ainsi que 
le rattachement d'un composant (repere ©) a ce dernier : 



var onglets = new rial to. widget. TabFolder( { (,..)}); 

var premierOnglet = onglets. addTabltemt "Premier onglet" 

var libel lei = new rialto. widget. Label ( 
"libeller, 15, 10, 
premierOnglet, <-© 
"Premiere zone", "libellel"); 

(...) 

La figure 12.8 illustre l'aspect d'un composant de ce type. 



true) ; 




Figure 12.8 

Aspect d'un composant de type rialto. widget.TabFolder 



Fenetres flottantes 

rialto met a disposition les classes rialto. widget. Alert et rialto. widget. PopUp afin de 
mettre en oeuvre des fenetres flottantes dans des pages Web. 

La premiere correspond simplement a une fenetre d'avertissement avec un message, et la 
seconde a une fenetre modale flottante. Le contenu de cette derniere peut etre construit 
specifiquement suivant le besoin de 1' application. 
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Fenetre d'avertissement 

La classe rialto. widget. Alert permet d'afficher des fenetres d'avertissement. Le cons- 
tructeur de cette classe accepte un unique parametre correspondant au texte du message a 
afficher, comme dans le code suivant : 

var fenetreAvertissement = new rial to. widget. Alertt "Mon message"); 

La figure 12.9 illustre 1' aspect du composant graphique cree. 



Figure 12.9 

Apparence du composant graphique 
correspondant a une fenetre modale 



Information 

Mon message 



Fenetre generique 

La classe rialto. widget. PopUp est plus elaboree que celle decrite a la section precedente. 
Son constructeur se fonde sur les parametres recapitules au tableau 12.29. 



Tableau 1 2.29 Parametres du constructeur de la classe rialto.widget.Popup 



Parametre 


Type 


name 


Une chaine de caracteres 


top 


Un nombre entier 


left 


Un nombre entier 


width 


Une chaine de caracteres 


height 


Une chaine de caracteres 


contain 


Un objet 


title 


Une chaine de caracteres 


greyBackground 


Une chaine de caracteres 






Description 

Correspond au nom de la fenetre. 

Correspond a la position verticale de la fenetre. 

Correspond a la position horizontale de la fenetre. 

Correspond a la largeur de la fenetre. 

Correspond a la hauteur de la fenetre. 

Specifie un texte a ajouter dans la fenetre. 

Correspond au titre de la fenetre. 

Specifie la couleur de fond de la fenetre. La valeur Gri s est utilisable pour un 
fond griset la valeur transparent pour un fond transparent. 



Le code suivant met en oeuvre cette classe sous la forme d'une boite de dialogue (repere O) 
contenant la saisie de parametres d'authentification (reperes ©) : 

var popup = new rialto. widget . PopUp( <-0 

"test", 150, 370, "280", "120", "", 

"Authentifi cation" , "transparent") ; 
var cadre = new rialto. widget . Framet { 

name: "cadre" , top:"20", 1 eft : "5 " , 

width:"240", height: "70", 
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title: "Util isateur/Mot de passe", 
open:true, dynamic: false, 
position: "absolute", 
draggable:false, parent:popup 



}); 



var 1 ibel leldentifiant = new rial to. widget. Label ( 

"1 ibel leldentifiant" , 15, 10, cadre, 
"Utilisateur", "libellel"); 
var identifiant = new rial to. widget. Text( <-© 

"texteldentifiant", 10, 100, 
100, "A", cadre. 

( autoUp:fal se, isRequi red:false, 
disable:false, rows:5, accessKey: 
tablndex:"", initValue:"" )); 
var 1 ibel leMotDePasse = new rialto. widget. Label ( 

"libelleMotDePasse", 45, 10, 
cadre, "Mot de passe", "libellel"); 
var motDePasse = new rial to. widget. Text( <-© 

"texteMotDePasse", 40, 100, 
100, "P", cadre, 

{ autoUp:false, isRequired:false, 
disable:false, rows:5, accessKey: 
tablndex: "" , initValue: "" ) ) ; 
(...) 

La figure 12.10 illustre l'aspect du composant graphique cree. 



Figure 12.10 

Apparence du composant graphique 
de type rialto. widget.PopUp 



Authentifi cation 

Utilisateur/Mot de passe 
Utilisateur 



Mot de passe 



® 



) 



Composants complexes 

La bibliotheque rialto met a disposition trois composants graphiques complexes aux 
fonctionnalites elaborees, qui permettent de mettre en oeuvre des tableaux et des arbres. 



La figure 12.11 illustre les classes relatives aux composants complexes. 
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AbstractComponent 



+moveTo() 

+setLeft() 

+setTop() 

+setWidth() 

+setHeight() 

+setVisible() 

+setDraggable() 

+setPosition() 

+setStyle() 

+placeln() 

+remove() 

+getHtmlExt() 

+getHtmllmp() 

+getHtmlDD() 

+getHtmlRZ() 



<h 



Tree 



+addNode() 
+createAndAddNode() 
+getRoot() 
+onclick() 



TreeNode 



+toggle() 

+hasChild() 

+addNode() 

+insertBefore() 

+removeNode() 

+setText() 

+isFirst() 

+isLast() 

+first() 

+last() 

+next() 

+previous() 

+setStyle() 

+onclick() 



Grid 



+addOneLine() 

+clickLine() 

+deleteLines() 

+deleteOneLine() 

+disableLine() 

+fillGrid() 

+findLine() 

+getCelllndex() 

+getCellText() 

+getLinelndex() 

+initTab() 

+insertOneLine() 

+setCellText() 



£ 



TreeGrid 



Figure 12.11 

Classes des composants complexes 

Support des tableaux 

La bibliotheque offre la possibility de mettre en oeuvre des tableaux evolues en se fondant 
sur la classe ri alto . wi dget . Gri d. 

Le constructeur de cette classe prend en parametre un tableau associatif contenant les 
proprietes recapitulees au tableau 12.30. 

Tableau 12.30 Proprietes utilisables par le constructeur de la classe rialto.widget.Grid 



Parametre 


Type 


Description 


actifCl ic 


Un booleen 


Active le die pour le tableau. 


autoWidth 


Un booleen 


Specifie si la taille du tableau est la meme que celle du composant qui le contient. 


bNavig 


Un booleen 


Specifie le mode de navigation du tableau. Si la valeur est true, le tableau est pagine. 
Dans le cas contraire, les donnees du tableau sont affichees d'un bloc. 


bool Print 


Un booleen 


Specifie si le tableau peut etre imprime. 
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Tableau 12.30 Proprietes utilisables par le constructeur de la classe rialto.widget.Grid (suite) 

Description 

Specifie si la selection se fait sur les lignes (valeur f al se) ou sur les cellules (valeur true). 

Correspond a la hauteur du composant. Peut etre exprimee aussi bien sous forme de 
nombre que de pourcentage. 

Correspond a la position horizontale de la fenetre. 

Correspond a la hauteur des lignes. 

Specifie si [edition multiple de lignes est activee. 

Correspond au nom de la fenetre. 

Correspond a un composant rialto ou a un conteneur HTML classique auquel est rattache 
le composant. 

Specifie le nombre de lignes affichees en mode pagine. 

Specifie si les lignes du tableau peuvent etre triees. 

Specifie si le mode d'affichage peut etre change. 

Specifie les libelles des en-tetes des differentes colonnes du tableau. 

Specifie les types et les largeurs des differentes colonnes du tableau. 

Correspond a la position verticale de la fenetre. 

Specifie si les lignes du tableau sont editables. 



Parametre 


Type 


eel 1 Active 


Un booleen 


height 


Une chaine 
de caracteres 


left 


Un nombre entier 


1 ineHeight 


Un nombre entier 


multi Select 


Un booleen 


name 


Une chaine 
de caracteres 


parent 


Un objet 


rang 


Un nombre entier 


sortable 


Un booleen 


switchable 


Un booleen 


TabEntete 


Un tableau 


tabTypeCol 


Un tableau 


top 


Un nombre entier 


writable 


Un booleen 



Le code suivant met en ceuvre la classe rialto.widget.Grid, qui offre la possibilite de 
specifier les en-tetes (repere O) des differentes colonnes, les types de donnees (repere ©) 
qu'elles attendent et les divers comportements souhaites pour le tableau, tels que la selection 
multiple (repere ©) de lignes, le tri des lignes (repere ©) ainsi que leur edition (repere ©) : 

var tableau = new rial to. widget. Grid( { 

top:10, left:5, height:200. 

TabEntete: [ "Numero" , "Isbn" , "Tit re" , <-© 

"Auteurs", "Date de parution" ], 

name: "tableau" , parent:cadre, 

bNavig:false, rang:5, 

tabTypeCol :[ ["string" ,60] , ["string" ,90] ,<-© 
["string", 200], ["string" ,220] , 
["date", 120] ], 

cell Active:false, mul tiSelect:false, <- © 

sortable: true, 1 ineHeight: 16, <-© 

bool Print: true, switchable: true, 

actifClic:true, autoResizableW:false, 

writable:true<-© 
}); 

La classe rialto.widget.Grid met a disposition la methode fill Gri d arm de specifier les 
donnees du tableau. Elle prend en parametre un tableau contenant les donnees des diffe- 
rentes lignes. Les colonnes d'une ligne sont elles-memes specifiees sous forme de tableau. 
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Le code suivant indique comment mettre en oeuvre cette methode : 



var tableau 
tableau. fil 

[ 

[ 



= new rial to. widget. GricK { (...) }); 
Grid([ 



"1", "2212117108 

"J. Dubois, J. P. 

"2", "2212115709 

"R. Goetter et S 

"3", "2212120095 

"A. Gougeon, T 
„ 4 „ 

"Michel Plasse", "14/09/2006"] 



, "Spring par la pratique", 
Retaille, T. Tempi ier" , "28/04/2006"] 
. "CSS 2: Pratique du design web", 
Blondeel", "16/07/2005"], 
."JavaScript pour le Web 
Tempi ier", "30/11/2006"], 



2.0", 



"2212119658", "Developpez en Ajax", 



]); 



Les donnees contenues dans un tableau sont accessibles en se fondant sur son attribut 
tabData, correspondant a un tableau de donnees dont la structure est similaire a celle du 
parametre de la methode -fi 1 1 Grid. 

La figure 12.12 illustre l'aspect du tableau cree. 



1 Liste des ouvrages 








©I 




Titre 






o 


Numeral 

1 
2 


IslHI 


Aiiteurs 


Dote (le pai iition 


2212117108 
2212115709 


Spring par la pratique 


J. Dubois, J. P. Retaille, T. Templier 


28/04/2006 




CSS 2: Pratique du design web 


R.GoetteretS. Blondeel 


16/07/2005 


I V 3 


2212120095 


JavaScript pour le Web 2.0 


A. Gougeon, T. Templier 


30/11/2006 




4 


2212119658 


Developpez en Ajax 


Michel Plasse 


14/09/2006 







Figure 12.12 

Aspect d'un composant graphique de type rialto. widget.Grid 

La bibliotheque rialto permet de modifier les donnees du tableau en editant directement 
les lignes de donnees qu'il contient. Cette fonctionnalite est activee au moment de la 
creation du tableau en se fondant sur le parametre wri tabl e. 

La figure 12.13 illustre l'aspect d'un tableau en mode modification 



1 Liste des ouvrages 








©I 










E> 




1-4 


Numero Islm 


Titre 


Aiiteurs 


Dote <le partition 


1 2212117108 


Spring par la pratique 


J. Dubois, J. P. Retaille, T. Templier 
R.GoetteretS. Blondeel 


28/04/2006 




2 2212115709 


CSS 2: Pratique du design web 


16/07/2005 




I V 3 


2212120095 


IEBSBBB|iSlfflElEIH!E18 


A. Gougeon, T. Templier 


30/11/2006 




4 I 2212119658 


Developpez en Ajax 


Michel Plasse 


14/09/2006 







Figure 12.13 

Aspect d'un tableau en mode modification 
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La classe rialto. widget. Grid offre diverses methodes permettant de manipuler par 
programmation les donnees contenues dans un tableau. 

Le tableau 12.31 recapitule les principales de ces methodes de manipulation. 



Tableau 12.31 Principales methodes de manipulation des donnees 
de la classe rialto.widget.Grid 



Methode 


Parametre 


addOneLine 


Un tableau contenant 
les donnees de la ligne 


cl ickLine 


Deux nombres entiers 


deleteLines 


Une chaine de caracteres 


deleteOneLine 


Un nombre entier 


disableLine 


Deux nombres entiers 


fill Grid 


Un tableau 


findLine 


Un entier et une chaine 
de caracteres 


getCel 1 Index 


Un nceud DOM de cellule 


getCel IText 


Les indices de la ligne et 
de la colonne 


getHtml Cel 1 Fromlndex 


Deux nombres entiers 


getHtml Li neFromlndex 


Un nombre entier 


getlndCellCl ic 


- 


getlndLineCl ic 


- 


getLinelndex 


Un nceud DOM de cellule 


initTab 


Un booleen 


insertOneLine 


Un tableau contenant les 
donnees et I'indice de ligne 


isCell 


Un nceud DOM 


is Line 


Un nceud DOM 


setCel IText 


Les indices de la ligne et 
de la colonne ainsi qu'une 
chaine de caracteres 



Description 

Ajoute une ligne a la fin du tableau en se fondant sur les donnees 
fournies. 

Selectionne une ligne ou une cellule en se fondant sur les indices 
passes en parametres. 

Supprime toutes les lignes du tableau et specifie le nouveau titre du 
tableau en mode navigation. 

Supprime une ligne du tableau dont I'indice est passe en parametre. 

Desactive une ligne ou une cellule en se fondant sur les indices pas- 
ses en parametres. 

Initialise les donnees du tableau a partir d'une tableau de donnees. 

Parcourt toutes les donnees d'une colonne afin de trouver une valeur 
et retourne I'indice de la premiere ligne correspondante. 

Retourne I'indice d'une cellule en se fondant sur son nceud DOM. 

Retourne le texte d'une cellule. 

Retourne le nceud DOM de la cellule en se fondant sur les indices 
passes en parametres. 

Retourne le noeud DOM de la ligne en fonction de son indice. 

Retourne I'indice de la cellule cliquee. 

Retourne I'indice de la ligne cliquee. 

Retourne I'indice d'une ligne en se fondant sur son nceud DOM. 

Initialise un tableau en supprimant les lignes et les donnees corres- 
pondantes. 

Ajoute une ligne a une position donnee dans le tableau en se fondant 
sur les donnees fournies. 

Retourne true si le nceud est une cellule. 

Retourne true si le nceud est une ligne. 

Positionne le texte pour une cellule. 



La plupart des methodes du tableau 12.31 prennent en parametre des lignes HTML. 

Le code suivant fournit un exemple d' utilisation des principales methodes du tableau 
precedemment cree afin de lui ajouter (repere O) et de lui supprimer (repere ©) des lignes : 
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(...) 

function ajouterl_igne( ) {«-© 

// Construction des donnees a ajouter 
var donnees = [ "3", "2212120095". 

"JavaScript pour le Web 2.0", 
"A. Gougeon, T. Templier", 
"30/11/2006" ]; 
// Ajout des donnees 
tableau.addOnel_ine( donnees) ; 
} 

function supprimerl_igneSelectionnee( ) {<-© 
if(tableau.getIndl_ineClic()!=-l ) ( 

// Recuperation de l'indice de la ligne selectionnee 
var indiceLigneSelectionnee = tableau. getlndLineCl ic( ) ; 
// Recuperation de la ligne selectionnee 
var 1 igneSelectionnee = tableau. getHtml LineFromIndex( 

indiceLigneSelectionnee) ; 
// Suppression de la ligne selectionnee 
ta bleau. del eteOneLi net indiceLigneSelectionnee) ; 
} 
} 



Support des arbres 

La bibliotheque rialto offre la possibility de mettre en oeuvre des arbres en se fondant sur 
les classes rialto. widget. Tree et rialto. widget. TreeNode. 

Le constructeur de la classe rialto. widget. Tree accepte les differents parametres recapi- 
tules au tableau 12.32 par 1' intermediate d'un tableau associatif. 

Tableau 12.32 Parametres du constructeur de la classe rialto.widget.Tree 



Parametre 


Type 


Description 


bool SelActive 


Un booleen 


Specifie si le style des nceuds change quand ils sont selectionnes. 


draggableNode 


Un booleen 


Specifie si les nceuds peuvent etre deplaces en se fondant sur le mecanisme de glisser- 
deposer. 


height 


Une chaine 
de caracteres 


Correspond a la hauteur du composant. Peut etre exprimee aussi bien sous forme de 
nombre que de pourcentage. 


left 


Un nombre entier 


Correspond au positionnement horizontal du composant. 


name 


Une chaine 
de caracteres 


Correspond au nom de I'arbre. 


parent 


Un objet 


Correspond a un composant rialto ou a un conteneur HTML classique auquel est rattache 
le composant. 


rootOpen 


Un booleen 


Specifie si le noeud racine est ouvert lors de la creation du tableau. 


top 


Un nombre entier 


Correspond au positionnement vertical du composant. 


width 


Une chaine 
de caracteres 


Correspond a la largeur du composant. Peut etre exprimee aussi bien sous forme de 
nombre que de pourcentage. 


wi thRoot 


Un booleen 


Specifie si un titre et une image sont associes au nceud racine. 


withT 


Un booleen 


Specifie si des lignes en pointille sont affichees afin de relier les nceuds de I'arbre. 
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La mise en oeuvre de la classe rialto. widget. Tree se realise de la maniere suivante : 

var arbre = new rialto. widget. Treed 

name: "arbre", top: "5", left:"0", 

width: "300", height: "200", 

parent: cadre, boolSel Active: true, rootOpen: true, 

withRoot: true, withT: true, draggableNode: false 
}); 

Une fois cet element instancie, les differents noeuds de l'arbre peuvent lui etre ajoutes en 
se fondant sur sa methode createAndAddNode. Cette methode prend en parametre l'identi- 
fiant du noeud auquel le nouveau noeud est ajoute ainsi que diverses proprietes pour le 
noeud ajoute. 

Le code suivant donne un exemple de mise en oeuvre de cette methode : 



var arbre 



)); 



new rialto. widget. Tree({ 
name: "arbre", top: "5", left:"0", 
width: "300", height: "200", 

parent: cadre, boolSelActi ve: true, rootOpen: true, 
withRoot: true, withT: true, draggableNode: false 



va 



r noeudRacineArbre = arbre. createAndAddNode(arbre. id, { 
name: "noeudRacineArbre", text: "Ouvrages", 
icon: ' i mages /imTreeview/pict_syntheti k_off.gif , 
icon2: 'images/imTreeview/pict_syntheti k_on.gif , 
onclick: "", open: true, reload: false, 
url : "" , typelnfo: "" 

}); 

var noeudJ2EE = arbre. createAndAddNodetnoeudRacineArbre. id, { 
name: "noeudJ2EE", text: "J2EE", 
icon: "images/imTreeview/pict_syntheti k_off.gif" 
i con2 : " i mages /i mTreevi ew/pi ct_syntheti k_on . gi f " 
onclick: "", open: true, reload: false, 
url : "" , typelnfo: "" 

}); 

La figure 12.14 illustre l'aspect de l'arbre cree ci-dessus. 



Figure 12.14 

Aspect d'un arbre 



Liste des ouvrages 


01 


X? Ouvrages 




B-<? J2EE 




• Spring par la pratique 




- V Web 




• CSS 2: Pratique du design web 




; • JavaScript pour le Web 2.0 




• Developpez en Ajax 
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Un observateur global peut etre enregistre sur l'arbre en se fondant sur sa methode oncl ick 
(repere ©) afin de realiser des traitements (repere O) lors de la selection de ces nceuds. 

Le code suivant montre comment mettre en oeuvre ce mecanisme : 

function selectionNoeud(noeud) {<-0 

alertC'Nffiud selectionne. Identifiant: " 

+niEud.id+", texte: "+noeud.text) ; 
} 
var arbre = new rialto. widget. Tree( { 

name: "arbre", top: "5", 1 eft : "0" , 

width: "300", height: "200", 

parent: cadre, boolSelActive: true, rootOpen: true, 

withRoot: true, withT: true, draggableNode: false 
}); 
arbre. oncl ick = selectionNoeud; <-© 

Les noeuds que manipule l'arbre sont de type rialto. widget. TreeNode et peuvent etre 
crees explicitement en instanciant cette classe directement. lis doivent etre ensuite ajoutes a 
l'arbre en se fondant sur sa methode addNode. 

Les tableaux 12.33 et 12.34 recapitulent les parametres du constructeur de cette classe 
ainsi que ses differentes methodes. 



Tableau 12.33 Parametres du constructeur de la classe rialto.widgelTreeNode 



Parametre 


Type 


icon 


Une chaine de caracteres 


i con2 


Une chaine de caracteres 


name 


Une chaine de caracteres 


oncl ick 


Une chaine de caracteres 


open 


Un booleen 


reload 


Un booleen 


text 


Une chaine de caracteres 


url 


Une chaine de caracteres 



Description 

Correspond au chemin de I'image affichee pour le nceud. 

Correspond au chemin de I'image affichee quand le nceud est ouvert. 

Correspond au nom du noeud. 

Correspond au nom de la fonction a appeler lorsqu'un noeud est clique. 

Specifie si le nceud est initialement ouvert. 

Specif ie si le nceud peut etre recharge en se fondant sur la valeur du parametre url . 

Correspond au texte affiche par le noeud. 

Correspond a I'adresse appelee afin de recuperer la nouvelle valeur du nceud. 



Tableau 12.34 Methodes de la classe rialto.widget.TreeNode 



Methode 


Parametre 


Description 


addNode 


Un nceud de type rial to. widget. 
TreeNode 


Permet d'ajouter un noeud. 


existChild 


Une chaine de caracteres 


Retourne la valeur true s'il existe pour le noeud un enfant corres- 
pondent a I'identifiant passe en parametre. 


fi rst 


- 


Retourne le premier nceud enfant du nceud. 


hasChild 


- 


Retourne si le noeud possede des noeuds enfants. 


insertBefore 


Un nceud de type rialto. widget. 
TreeNode et une chaine de caracteres 


Ajoute un noeud passe en parametre avant le noeud sur lequel 
s'applique la methode. 
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Tableau 12.34 Methodes de la classe rialto.widget.TreeNode (suite) 


Methode 


Parametre 




Description 


isFi rst 


- 




Determine si le nceud est le premier enfant de son nceud parent. 


isLast 


- 




Determine si le nceud est le dernier enfant de son noeud parent. 


last 


- 




Retourne le dernier nceud enfant du nceud. 


next 


- 




Retourne le noeud suivant et situe au meme niveau du nceud. 


onclick 


- 




Correspond a la methode a redefinir afin de specifier les traite- 
ments a executer lors de la selection du nceud. 


previous 


- 




Retourne le nceud precedent et situe au meme niveau du nceud. 


removeNode 


line chaine de caracteres 




Supprime un nceud de la liste des nceuds enfants en se fondant 
sur son identifiant. 


setStyle 


Un tableau associatif 




Positionne les proprietes du style en se fondant sur les parametres 
contenus dans un tableau associatif. 


setText 


Une chaine de caracteres 




Specifie le nouveau texte du noeud. 


toggle 


Une chaine de caracteres et 
associatif 


un tableau 


Ouvre ou ferme le noeud dont I'identifiant est passe en parametre. 



Le code suivant met en oeuvre cette classe (reperes O) conjointement avec la methode 
addNode de l'arbre (reperes ©) : 

var arbre = new rial to. widget. Tree({ 

name: "arbre", top: "5", left:"0", 

width: "300", height: "200", 

parent: cadre, boolSelActi ve: true, rootOpen: true, 

withRoot: true, withT: true, draggableNode: false 
}); 

var noeudRacineArbre = new rialto. widget. TreeNode( {<-€> 

name: "noeudRacineArbre", text: "Ouvrages", 

icon: 'i mages /imTreeview/pict_syntheti k_off.gif , 

icon2: 'i mages /imTreeview/pict_syntheti k_on.gif , 

onclick: "", open: true, reload: false 
}); 
arbre. addNode (noeudRacineArbre, arbre. id ); <-© 

var noeudJ2EE = new rial to. widget. TreeNodet {<-© 

name: "noeudJ2EE", text: "J2EE", 

icon: "images/imTreeview/pict_syntheti k_off.gif" , 

i con2 : " i mages /i mTreevi ew/pi ct_syntheti k_on . gi f " , 

onclick: "", open: true, reload: false, 

url : "" , typelnfo: "" 
}); 
a rb re. addNode ( noeud J2EE, noeudRacineArbre. id) ; «-© 
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Dans le code suivant, les methodes f i rst (repere O) et next (repere ©) offrent la possibi- 
lite de parcourir les differents noeuds enfants d'un noeud : 

(...) 

var premierNoeudEnfant = noeudRacineArbre.fi rst( ) ; <-0 

// premierNoeudEnfant contient le noeud « J2EE » 

var secondNoeudEnfant = premierNoeudEnfant. next( ); <-© 

// premierNoeudEnfant contient le nteud « Web » 

Dans le code suivant, la methode removeNode (repere O) permet de supprimer un nceud de 
la liste des nceuds enfants : 

I var dernierNoeudEnfant = noeudWeb.last( ) ; 
noeudWeb.removeNode(dernierNoeudEnfant.id) ; <-© 

Comme l'indique le code suivant, la bibliotheque offre la possibilite de declencher des 
traitements (repere O) lors de la selection d'un noeud en utilisant sa propriete onclick 
(repere ©) dans les parametres du constructeur de la classe rialto. widget. TreeNode : 



function selectionNoeudt ) (<-0 

alertC'Le noeud a ete selectionne. 



"); 



(...) 

var noeudRacineArbre = new rial to. widget. TreeNode({ 

name: "noeudRacineArbre", text: "Ouvrages", 

icon: ' i mages /imTreeview/pi ct_synthetik_off.gif , 

icon2: 'i mages /imTreeview/pict_syntheti k_on.gif , 

onclick: selectionNoeud, <-© 

open: true, reload: false 
}); 

Combiner arbres et tableaux 

La bibliotheque rialto offre la possibilite de combiner les tableaux avec les arbres arm de 
mettre en oeuvre une representation tabulaire d'elements d'arbres. 

Ce mecanisme est implements par le biais de la classe rialto.widget.TreeGrid heritantde 
la classe rialto. widget. Grid. Les parametres de son constructeur sont done les memes 
que ceux de cette derniere classe. La classe rialto.widget.TreeGrid accepte neanmoins 
les deux parametres recapitules au tableau 12.35. 

Tableau 12.35 Parametres supplementaires du constructeur 
de la classe rialto.widget.TreeGrid 



Parametre 

textFi rstCol 
widthFirstCol 



Type 

Une chaine de caracteres 
Un nombre entier 



Description 

Correspond au titre de la premiere colonne, colonne contenant les noeuds. 
Correspond a la longueur de la premiere colonne, colonne contenant les noeuds. 



Certains parametres de la classe rial to. widget. Grid ne sont neanmoins pas modifiables et 
prennent une valeur donnee. C'est le cas des parametres swi tchabl e, avec la valeur f al se, 
lineHeight, avec la valeur 23, sortable, avec la valeur false, et bNavig, avec la valeur false. 
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Notons que les en-tetes n'incluent pas la colonne contenant les noeuds. 

Comme l'indique le code suivant, la mise en oeuvre de la classe rial to. widget. TreeGrid 
offre la possibility de specifier les en-tetes (repere O) des differentes colonnes ainsi que 
les types de donnees (repere ©) qu'elles attendent ; cette classe offre en outre la possibi- 
lity de specifier les divers comportements souhaites pour le tableau, tels que la selection 
multiple (repere ©) de lignes, le tri des lignes (repere 0) ainsi que leur edition (repere ©) : 

var tableauArbre = new rialto. widget. GridTreeU 

widthFirstCol : 160. 

name: "tableauArbre", top: "5", left:"0", 

width: "300", height: "200", 

TabEntete: [ "Numero" , "Isbn" , "Titre" , <-© 

"Auteurs", "Date de parution"], 

tabTypeCol : [ ["string" ,60] , ["string" ,90] ,<-© 
["string", 200], ["string" ,220] , 
["date", 120] ], 

bNavig: false, rang: 5, 

parent: cadre, 

cellActive: false, sortable: true,<-0 

multiSelect: false, lineHeight: 16,<-© 

boolPrint: true, switchable: true, actifClic: true, 

autoResizableW: false, writable: true*-© 
}); 

Comme l'indique le code suivant, une fois cet element instancie, les differents noeuds de 
l'arbre peuvent lui etre ajoutes en se fondant sur sa methode addNodeLine, laquelle prend 
en parametre l'instance du nceud (attribut parentLine, reperes ©) auquel le nouveau nceud 
est ajoute, ainsi que diverses proprietes pour le noeud ajoute, telles que le contenu de la 
ligne (attribut tabData, reperes ©) qui lui est associe : 

var noeudWeb = tableauArbre. addNodeLine( { 

name: "noeudWeb", text: "Web", icon: "", 
parentLine: noeudRacineArbre, <-© 
tabData: null ,<-© 
open: fal se, url : "" 



}); 
var 



noeudJavaScriptWeb2 = tableauArbre. addNodel_ine( ( 

name: "noeudJavaScriptWeb2" , text: "JavaScript" 

icon: "", 

parentLine: noeudWeb, <-© 

tabData: [ "3", "2212120095", <-© 

"JavaScript pour le Web 2.0", 
"A. Gougeon, T. Templier", 
"30/11/2006" ], 
open: fal se, url : "" 



1); 
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La figure 12.15 illustre l'aspect du tableau contenant l'arbre cree ci-dessus. 
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Figure 12.15 

Aspect d'un arbre contenu dans un tableau 

En resume 

Dans cette section, nous avons detaille les differents composants graphiques mis a disposition 
par la bibliotheque rialto, tels que les composants de formulaire ou de positionnement, 
les fenetres et les composants complexes. 

Nous avons vu que les possibilites offertes par ces composants etaient tres etendues et 
qu'elles permettaient de mettre en oeuvre facilement des interfaces graphiques evoluees 
et interactives dans des pages Web. 

La bibliotheque rialto offre egalement un cadre generique afin d'affecter des comportements 
aux composants graphiques. 

Comportements 

La bibliotheque rialto fournit un interessant mecanisme permettant d'appliquer des 
comportements a des elements d'une page Web. 

La bibliotheque en propose quatre predefinis, comme le recapitule le tableau 12.36. 
Tableau 12.36 Comportements predefinis 

Comportement Description 

Target Specifie la cible potentielle d'une action de glisser-deposer. 

Missile Specifie qu'un element peut etre glisse-depose vers un autre. 

DragAndDrop Applique un comportement de glisser-deposer a un element. 

ReSi ze Specifie un comportement de redimensionnement a un element. 



L' affectation d'un comportement a un composant se realise par l'intermediaire de la 
methode affect de l'objet rialto. widgetBehavior. Cette derniere prend en parametre un 
element HTML, le type de comportement ainsi qu'un tableau associatif de proprietes. 
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Comme l'indique le code suivant, la bibliotheque permet ainsi de specifier simplement 
un comportement de glisser-deposer a un composant graphique (repere O) en se fondant 
sur la methode affect (repere ©) : 

var 1 ibel lePrenom = new rialto. widget. Label ( <-0 

"1 ibellePrenom" , 45, 10, cadre, 
"Mot de passe", "libel lei"); 
rialto.widgetBehavior.affect( <-© 

1 ibel lePrenom. divExt, "DragAndDrop" , { 

oHtmlToMove: 1 ibel lePrenom.divExt, <-© 
oHtml EvtTarget: 1 ibel lePrenom.divExt*-© 
}); 

Le tableau associatif passe en parametre de la methode affect comprend les proprietes 
oHtmlToMove (repere ©) et oHtml EvtTarget (repere 0) afin de specifier respectivement l'objet 
deplace et l'objet capturant les evenements relatifs au glisser-deposer. 

La mise en oeuvre d'un glisser-deposer d'un composant vers un autre se realise en se fondant 
sur les comportements Mi ssi 1 e et Target, comportements specifiant respectivement l'element 
a l'origine du glisser-deposer et l'element cible. 

Le code suivant met en oeuvre ce mecanisme avec un libelle (repere O) et un champ de 
saisie (repere ©) afin de permettre de realiser un glisser-deposer du premier (comporte- 
ment Mi ssi 1 e, repere ©) vers le second (comportement Target, repere 0) : 



var libelleNom = new rial to. widget. Label ( <-© 

"1 ibel leNom" , 15, 10, cadre, "Nom", 



libeller); 



var nom = new rial to. widget. Text( <-© 

"textNom", 10, 120, 100, "A", cadre, 
{ autoUp:fal se, isRequi red:false, disable:false, 
rows:5, accessKey: "" , tablndex:"", initVal ue: ""} ) ; 
rialto.widgetBehavior.affectd ibel leNom.divExt, "Missile" , {«-© 

oHtmlToMove: 1 ibel leNom.divExt, 
oHtml EvtTarget: 1 ibel leNom.divExt 
}); 
rialto.widgetBehavior.affect(nom.divExt, "Target", {});<-© 

Pendant de la methode affect, la methode desaf f ect permet de supprimer un comportement 
a un element. 

Le mecanisme de comportement de rialto est extensible, si bien qu'il est possible de mettre 
en oeuvre ses propres comportements pour des elements d'une page Web. 



Rialto Studio 



Le projet rialto s'accompagne d'un outil interessant, ecrit avec la bibliotheque JavaScript 
rialto, permettant de construire des interfaces graphiques visuellement. 

Appele Rialto Studio, il propose une interface en trois onglets, Design, Tree et Source : 

• Design met a disposition une palette de composants graphiques qui peuvent etre 
disposes sur l'interface graphique en construction simplement par glisser-deposer. 
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Tree permet d'afficher la hierarchie des composants graphiques utilises dans l'inter- 
face graphique. Les differentes proprietes des composants sont accessibles en cliquant 
dans l'arborescence, et leur modification impacte automatiquement l'interface 
graphique. La figure 12.16 illustre l'onglet de navigation des elements de l'interface 
graphique creee. 
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Figure 12.16 

Onglet de navigation des elements de l'interface graphique en construction 



• Source contient les sources de l'interface graphique construite avec l'outil, sachant que 
plusieurs formats sont disponibles, dont le format JavaScript. 

Certaines fonctionnalites, telles que l'ouverture d'un fichier source ou la sauvegarde dans 
un fichier de l'interface graphique construite, ne sont disponibles que lorsque l'outil est 
utilise d'une maniere locale. 

Une demonstration au format Flash de cet outil est disponible sur le site du projet rialto, 
a l'adresse http://rialto.application-servers.eom/wiki/rialtostudio:video, tandis qu'une version en ligne 
est utilisable a l'adresse http://riaito.application-servers.com/rialto/riaitoStudio/. 
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Conclusion 



La bibliotheque rialto offre d'interessants mecanismes afin de mettre en oeuvre des appli- 
cations de gestion aux interfaces Web riches. La bibliotheque propose ainsi une impor- 
tante collection de composants graphiques permettant de creer des formulaires et de les 
positionner sur l'interface graphique. Des composants plus complexes sont egalement 
fournis afin de creer des arbres et des tableaux. 

La plupart de ces composants possedent un ensemble de fonctionnalites tres riches, dont 
la mise en oeuvre se realise simplement par le biais de parametres de configuration. Ces 
fonctionnalites vont de l'edition de lignes de tableaux au glisser-deposer, offrant ainsi la 
possibility de developper simplement des interfaces graphiques riches, efficaces et tres 
interactives. 

Cette bibliotheque facilite 1' utilisation des techniques Ajax afin de soumettre les donnees 
de formulaires. Ces techniques sont completement masquees par le composant de formu- 
laire, mais elles restent neanmoins utilisables directement si necessaire. 



Partie V 



Utilisation de services 
externes 



Apres avoir decrit la facon de structurer ses applications JavaScript avec des bibliotheques 
telles que dojo ou rialto, nous allons voir qu'une application JavaScript peut integrer et 
interagir avec un outil ou un service externe en se fondant sur une API JavaScript ou 
les techniques Ajax. 

Le chapitre 13 decrit la facon d'utiliser des API JavaScript externes. Apres avoir 
presente les mecanismes de fonctionnement de Google Maps, nous detaillons V utilisation 
des API fournies par cet outil de cartographie dans des applications JavaScript. 

Le chapitre 14 se penche sur l'utilisation de services externes accessibles par l'inter- 
mediaire de 1' architecture REST. Les services fournis par Yahoo! et Amazon sont utilises 
a titre d'exemple. 



13 



Google Maps 



Developpe par Google, societe emblematique du Web 2.0, l'outil Google Maps permet 
d'implementer des fonctionnalites de cartographie dans une application JavaScript. Cette 
integration est tres poussee, et 1' application et l'outil peuvent interagir de maniere tres 
fine en se fondant sur des evenements. 

Google Maps a reussi la gageure d'offrir des fonctionnalites evoluees tout en gardant une API 
de programmation simple, avec, de surcroit, la possibilite de l'etendre. 

Description et fonctionnement 

Avant d'aborder la mise en oeuvre de Google Maps, nous allons decrire le fonctionnement 
de cet outil fonde sur un service cartographique de Google, accede par 1' intermediate 
d'une API JavaScript fournie librement par cette societe. 

Les cartes sont decomposers en elements unitaires designes par le terme tile. L'API 
JavaScript de Google Maps construit la carte en se fondant sur ces elements, accessibles 
depuis des serveurs de Google. L image visible de la carte correspond a un assemblage 
de differents elements calcules par un serveur de cartographie. 

La figure 13.1 illustre ce principe. 

L'outil offre la possibilite d'enrichir les cartes avec differents elements graphiques afin 
de fournir des informations relatives a une localisation ou de signaler une localisation 
particuliere. Dans ce cas, l'API JavaScript de Google Maps assemble des images avec le 
fond de carte de facon a afficher la carte enrichie. 

La figure 13.2 illustre ce mecanisme. 

Google met en outre a disposition un service structure en differents elements afin de repondre 
aux requetes cartographiques. 
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Figure 13.1 

Construction de la carte affichee 
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Figure 13.2 

Assemblage de composants d'affichage 

La figure 13.3 illustre les constituants de ce service. 
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Figure 13.3 

Constituants du serxice cartographique de Google 
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Mise en ceuvre 



L'API JavaScript fournie par Google Maps s'appuie sur differentes classes, que nous 
allons decrire tout au long de cette section. Ces classes permettent d'integrer des cartes 
evoluees dans des applications JavaScript. 

Nous detaillerons en outre la facon d'installer l'outil dans une page Web et de l'utiliser et 
montrerons comment enrichir les cartes en leur ajoutant diverses informations. 

Nous indiquerons enfin les facons de faire interagir l'application avec les cartes arm de 
reagir a des actions de l'utilisateur. 



Installation 



Avant tout chose, une cle gratuite doit etre obtenue a partir de l'adresse : http://www.google. 
com/apis/maps/signup.html afin de pouvoir utiliser l'outil. 

Une fois la cle obtenue, la page Web doit importer le code JavaScript de l'application. 
L'adresse contenue dans l'attribut src doit inclure la cle precedemment recuperee. 

Comme le montre le code suivant, cette operation est realisee par 1' intermediate d'une 
balise script (repere O) : 

<html> 
<head> 

<script src="http: //maps. google. com/maps ?file=api&v=2& 
+key=Votre_ID_ici" <-Q 

type="text/javascript"X/script> 
(...) 
</head> 
(...) 
</html> 

Comme nous pouvons le constater, l'adresse n'est pas un fichier JavaScript statique mais 
une ressource JavaScript calculee dynamiquement en fonction des parametres suivants : 

• file: type de fichier JavaScript a retourner. Dans notre cas, il s' agit des API. La valeur 
de la propriete est done api . 

• v : version de 1' API Google Maps utilisee, actuellement la 2. 

• key : cle d' utilisation de l'outil Google Maps. 

Pour pouvoir utiliser des elements vectoriels tels que les traces de lignes dans les cartes, 
il est recommande d'ajouter l'espace de nommage VML ainsi qu'un style CSS. Ces 
ajouts sont indispensables pour le bon fonctionnement de cette fonctionnalite dans Inter- 
net Explorer. 
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Le code suivant illustre la mise en oeuvre de l'espace de nommage (repere O) et du style CSS 
(repere ©) : 

<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd"> 
<html xmlns=" http://www.w3.org/1999/xhtml " 

xmlns:v=" urn: schema s -mi crosoft-com:vml "><-© 
<head> 
(...) 

<style type="text/css"> 
v\:* {<-© 

behavior:url(#default#VML); 
} 
</style> 
<script src="http: //maps. google. com/maps ?file=api&v=2&key=macle" 

type="text/javascript"X/script> 
(...) 
</head> 
(...) 
</html> 

Google Maps supporte les differents navigateurs recapitules a l'adresse : 

http://local.google.com/support/bin/answer.py?answer=16532&topic=1499. 

Si le numero de version de Google Maps evolue regulierement, cela n'impacte pas le 
code des applications qui utilisent son interface de programmation. 



Utilisation de base 

La classe centrale de Google Maps est GMap2. Elle permet de positionner la carte sur une loca- 
lisation avec un niveau de zoom. Elle offre en outre des methodes qui enrichissent l'inter- 
face et permettent l'interaction avec 1' application, comme nous le verrons par la suite. 

Le tableau 13.1 recapitule les differentes families de methodes contenues dans cette classe. 
Tableau 13.1 Families de methodes de la classe GMap2 



Famille de methode 

Configuration de la carte 

Gestion des controles 

Gestion des types de cartes 

Etat de la carte 

Gestion 

des enrichissements 

Gestion 

des fenetres d'information 

Operations sur 
les coordonnees 



Description 

Methodes permettant de gerer les proprietes de configuration de la carte 

Methodes permettant de configurer les controles de la carte 

Methodes permettant de specifier les types de cartes a utiliser 

Methodes permettant de modifier I'etat de la carte (position de son centre, de son niveau de zoom, etc.) 

Methodes permettant de gerer les elements d'enrichissement, tels que les marqueurs et les for- 
mes graphiques 

Methodes permettant de gerer les fenetres d'information 

Methodes permettant de convertir des coordonnees en differentes mesures (pixel, latitude/longitude, 
etc.) 
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Une instance de la classe GMap2 correspond a une carte dont la creation se realise par 
l'instanciation de cette classe. La carte doit etre rattachee a une balise div de la page en 
se fondant sur le premier parametre de son constructeur. La valeur de ce parametre 
correspond a l'identifiant de cette balise. 

Le second parametre est optionnel et permet de specifier des options de la carte. 

Des la carte creee, il convient de la centrer sur une position avec un niveau de zoom par 
1' intermediate de la methode setCenter, comme dans le code suivant : 

<html> 
<head> 
(...) 
<script langage="text/javascript"> 

function initial isationCarte( ) {<-© 

var divCarte = document. getElementByldt "carte") ; 
var carte = new GMap2(divCarte) ; 
carte. setCentertnew GLatLng(47.2228, -1.5682), 11); 
} 
</script> 
</head> 
<body onl_oad="initialisationCarte( ) ; "><-0 

<div id="carte" style="width: 600px; height: 400px"X/di v><-© 
</body> 
</html> 

Le code JavaScript d'initialisation de la carte doit etre execute apres le chargement de 
l'arbre DOM de la page. De ce fait, le code ci-dessus le met en oeuvre dans une fonction 
appelee au chargement de la page (reperes O). 

La taille de la carte est specifiee dans cet exemple au niveau de 1' attribut styl e de la balise 
div (repere ©). 

II est possible de parametrer la carte lors de 1' instantiation de la classe GMap2, comme 
dans le code suivant : 

var options = { 

size: new GSize(600, 400), 

mapTypes: [ GMapType.NORMAL_MAP, GMapType.SATELLITE_MAP ] 
}; 

var carte = new GMap2(document.getElementById("carte" ) , options); 
carte. setCenter(new GLatLng(47.2228, -1.5682), 11); 

La figure 13.4 illustre la carte affichee par ce code dans un navigateur. 
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Figure 13.4 

Mise en aeuvre d'une carte simple avec Google Maps 

Nous allons completer la carte avec divers elements afln de faciliter la navigation et 
d'identifier differents endroits de la carte. 



Enrichissement de \ Interlace 

Comme explique precedemment, Google Maps permet d'enrichir l'interface graphique 
des cartes afin de faciliter le deplacement du perimetre geographique affiche et de fournir 
des reperes ainsi que des indications pour differentes localisations. 



Entites de navigation 

Certains outils de navigation, appeles controles, sont proposes afin d'offrir des fonction- 
nalites de navigation et d' interaction avec la carte. L'outil en definit cinq par l'intermediaire 
des classes recapitulees au tableau 13.2. 
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Tableau 13.2 Classes de controle des cartes 

Classe Description 

GLargeMapControl Enrichit le controle GSmal 1 MapControl en lui ajoutant une barre permettant de regler le niveau de zoom. 

GMapTypeControl Affiche des boutons permettant de changer de type de carte (plan/carte, satellite, mixte, etc.). 

GOvervi ewMapControl Affiche une petite fenetre de navigation sur la carte. 

GScal eControl Affiche I'echelle de la carte pour la valeur de zoom courante. 

GSmal 1 MapControl Affiche plusieurs icones permettant de se deplacer sur la carte et de modifier le niveau de zoom. 

GSmal 1 ZoomControl Affiche deux icones permettant de modifier le niveau de zoom. 

L'ajout et la suppression d'elements de controle pour une carte se realisent respective - 
ment par l'intermediaire des methodes addControl et removeControl . Elles prennent toutes 
deux en parametre 1' instance du controle. La methode addControl supporte un parametre 
supplementaire qui specifie la position du controle. Ce parametre etant optionnel, s'il est 
omis, la methode se fonde sur la valeur renvoyee par la methode GControl .getDefault- 
PositionC ). 

Nous allons enrichir la carte precedemment creee avec differents controles permettant de 
se deplacer et de modifier le niveau de zoom ainsi que le type de carte. 

Le code suivant illustre la mise en ceuvre de ces controles : 

var divCarte = document. getElementByldC'carte") ; 

var carte = new GMap2(divCarte) ; 

carte. addControl (new GLargeMapControl ()); 

carte. addControl (new GScal eControl ()) ; 

carte. addControl (new GMapTypeControl ()); 

var carteApercu - new GOverviewMapControl (new GSize(200,200) ) ; 

carte. addControl (carteApercu) ; 

carte. setCenter(new GLatl_ng(47.2228, -1.5682), 11); 

Depuis sa version 2.41, Google Maps supporte le controle GOverviewMapControl, qui offre 
la localisation de la zone affichee sur une carte de vue d'ensemble et facilite l'acces a des 
lieux de facon tres ergonomique. 

Le code suivant illustre sa mise en oeuvre (repere O), ainsi que l'enregistrement d'un 
observateur pour l'evenement cl 1 ck (repere ©) sur la carte de vue d'ensemble : 

var divCarte = document. getElementByldC'carte" ) ; 

var carte = new GMap2(divCarte) ; 

var control eApercu = new GOverviewMapControl (new GSize(200,200) ) ;<-0 

carte. addControl (control eApercu) ; 

var carteApercu - controleApercu.getOverviewMap( ) ; 

GEvent.addListenertcarteApercu, "click", functionO (<-© 

(...) 
}); 
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La figure 13.5 illustre 1'afnchage de la carte avec les controles dans un navigateur. 
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Figure 13.5 

Utilisation des elements de contrdle de Google Maps 

Elements de localisation et d'information 

Google Maps offre la possibilite de deflnir des marqueurs ainsi que des bulles d'infor- 
mation permettant d'annoter les cartes et de les enrichir par des informations comple- 
mentaires. L'outil permet en outre de definir des traces sur les cartes. Tous ces elements 
etendent la classe GOverl ay. L'ajout et la suppression de ces elements se realisent respec- 
tivement par l'intermediaire des methodes addOverl ay et removeOverl ay des classes GMap2 
ou GMarker. 

La classe GMarker permet de mettre en oeuvre les marqueurs arm de pointer graphique- 
ment un endroit sur une carte. Cette classe dispose d'un constructeur, dont les parametres 
sont les coordonnees sur lesquelles il pointe ainsi que ses proprietes optionnelles. 



Le tableau 13.3 recapitule ces differentes proprietes. 
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Propriete 




Type 


bounceGravi 


ty 


Number 


bouncy 




Boolean 


cl ickable 




Boolean 


draggable 




Boolean 


icon 




Gloon 



title 



Tableau 13.3 Proprietes du constructeur de la classe GMarker 

Description 

Correspond a la gravite utilisee lorsque le marqueur rebondit a la fin d'une operation de glisser- 
deposer. Sa valeur par defaut est 1 . 

Specifie si le marqueur doit rebondir a la fin d'une operation de glisser-deposer. 

Specifie si le marqueur est cliquable. Sa valeur par defaut est true. 

Specifie si le marqueur peut etre deplace par glisser-deposer. Sa valeur par defaut est fa 1 se. 

Specifie I'icone a utiliser pour le marqueur. La valeur par defaut correspond a la valeur de la 
constante G_DEFAULT_ICON. 

String Specifie la valeur du texte de description affiche lorsque la souris se trouve au-dessus du 

marqueur (tooltip). 



La mise en oeuvre d'un marqueur simple est illustree dans le code suivant : 

var divCarte = document. getElementByldC'carte" ) ; 

var carte = new GMap2(divCarte) ; 

(...) 

var point = new GLatLng(47 . 2228, -1.5682) ;<-© 

var marqueur = new GMarker(point, (draggable: true});<-© 

carte. addOverl ay (marqueur) ; 

Dans l'exemple precedent, un marqueur est positionne au centre de la ville de Nantes 
(repere O). Celui-ci peut etre deplace par glisser-deposer puisque la valeur de sa propriete 

draggable est true (repere ©). 

II est possible de mettre en oeuvre des marqueurs personnalises arin d' utiliser ses propres 
images plutot que I'icone fournie par defaut. Une image correspondant a Tomb-re de I'icone 
doit egalement etre mise en oeuvre. 

Le code suivant donne un exemple de mise en oeuvre de cette personnalisation : 

// Icone de base pour les icones personnal isees 

var iconeBase = new GlconO; 

iconeBase. shadow = "http://www.google.com/mapfiles/shadow50.png" ; 

iconeBase. iconSize = new GSize(50, 70); 

iconeBase. shadowSize = new GSize(37, 34); 

iconeBase. iconAnchor = new GPoint(9, 34); 

iconeBase. infoWindowAnchor = new GPoint(42, 50); 

iconeBase. infoShadowAnchor = new GPoi ntC 18, 25); 

// IcSne personnalisee 

var icone = new GIcon(iconeBase) ; 

icone. image = "iconePersonal isee.png" ; 

icone. shadow = "ombrelconePersonal isee.png" 

icone. shadowSize = new GSize(70, 70); 

// Marqueur utilisant I'icone personnalisee 

var marqueur = new GMarker(carte.getCenter( ) , icone); 
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Les fenetres d'information peuvent etre rattachees a differents elements, tels que la carte 
elle-meme ou des marqueurs. Les differents types de fenetres fournis par Google Maps 
sont recapitules au tableau 13.4. 

Tableau 13.4 Types de fenetres fournies par Google Maps 



Type Description 

HTML Se fonde sur HTML en tant que contenu et est mis en ceuvre par I'intermediaire de la methode 

openlnfoWindowHtml d'une carte ou d'un marqueur. Cette methode prend en parametre une chaine 
de caracteres contenant du code HTML. 

HTML avec onglets Est mis en oeuvre de la meme maniere que le type precedent mais par le biais de la methode open- 
InfoWindowTabsHtml . 

Texte Correspond au type le plus simple. II est mis en oeuvre par le biais de la methode openlnfoklindow 

d'une carte ou d'un marqueur. Cette methode prend en parametre un nceud XML de type texte. 

Texte avec onglets Met en ceuvre une fenetre avec des onglets. Ces derniers contiennent du texte et sont definis par I'inter- 
mediaire de la classe GI nf okli ndowTab, dont le constructeur prend en parametre le nom de I'onglet ainsi 
que son contenu. La fenetre est mise en ceuvre par le biais de la methode openlnfoWindowTabs d'une 
carte ou d'un marqueur, methode acceptant en parametre un tableau d'onglets. 



Nous allons mettre en oeuvre une fenetre contenant du code HTML, la methode openlnf o- 
WindowHtml de la classe GMap2 etant utilisee pour l'ajouter a la carte, comme dans le code 
suivant : 

var divCarte = document. getElementByldt "carte") ; 

var carte = new GMap2(di vCarte) ; 

(...) 

carte. openlnfoWindowHtml (carte. getCenter( ) , 

"Une fenetre d'<b>information</b>") ; 

Si la fenetre doit etre rattachee a un marqueur, une methode du meme nom est disponible 
dans la classe GMarker, comme l'illustre le code suivant : 

(...) 

var point = new GLatLng(47 . 2228 , -1.5682); 

var marqueur = new GMarker(point, {draggable: true}); 

carte. addOverl ay (marqueur) ; 

(...) 

marqueur. openlnfoWindowHtml ( "Une fenetre d'<b>information</b>") ; 

Notons que l'ouverture de ces fenetres d'information peut etre effectuee par 1' intermediate 
d'evenements, aussi bien au niveau de la carte que des marqueurs. 

Google Maps offre en outre la possibilite de realiser des traces de points sur des cartes 
par le biais de la classe GPolyl i ne. Cette derniere prend en parametre un tableau contenant 
les differents points du trace, comme dans le code suivant : 

var divCarte = document. getElementByldt "carte") ; 

var carte = new GMap2(di vCarte) ; 

(...) 

var points = [...]; 

var trace = new GPolyl ine(points) ; 

carte. addOverl ay (trace) ; 
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La figure 13.6 illustre l'affichage sur une carte des differents elements decrits tout au 
long de cette section : marqueurs, fenetres d' information et traces de points. 
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Figure 13.6 

Elements de localisation et d' information de Google Maps 



Interaction avec /'application 

Google Maps offre la possibility d'effectuer des traitements a partir de differentes opera- 
tions realisees par l'utilisateur sur la carte affichee. Ce mecanisme permet de mettre en 
oeuvre une etroite interaction entre 1' application et l'outil Google Maps. 

L'enregistrement d'observateurs d'evenements se realise par l'intermediaire de la classe 
GEvent, qui fournit des methodes afin de gerer des observateurs aussi bien sous forme de 
fonctions JavaScript simples que de methodes d'objets. 

Le tableau 13.5 recapitule les methodes de cette classe. 
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Tableau 13.5 Methodes de la classe GEvent 



Methode 

addDomListener 

addListener 
bind 



bindDom 

clearlnstanceListeners 

clearListeners 

removeListener 

trigger 



Parametre 

L'instance de la source, le code 
de I'evenement DOM et la fonc- 
tion de I'observateur 

L'instance de la source, le code 
de I'evenement et la fonction de 
I'observateur 

L'instance de la source, le code 
de I'evenement, l'instance de 
I'observateur ainsi que sa methode 
d'observation 

Linstance de la source, le code de 
I'evenement DOM, l'instance de 
I'observateur ainsi que sa methode 
d'observation 

L'instance de la source 



L'instance de la source et le code 
de I'evenement 

L'objet representant un obser- 
vateur enregistre 



L'instance de la source, le code 
de I'evenement et eventuellement 
des parametres additionnels 



Description 

Permet d'enregistrer une fonction en tant qu'observateur 
pour un evenement DOM. Cette methode retourne un objet 
representant I'observateur enregistre. 

Permet d'enregistrer une fonction en tant qu'observateur 
pour un evenement d'une instance de carte. Cette methode 
retourne un objet representant I'observateur enregistre. 

Permet d'enregistrer une methode d'un objet en tant 
qu'observateur pour un evenement d'une instance de carte. 
Cette methode retourne un objet representant I'observateur 
enregistre. 

Permet d'enregistrer une methode d'un objet en tant 
qu'observateur pour un evenement DOM. Cette methode 
retourne un objet representant I'observateur enregistre. 

Permet de supprimer tous les observateurs enregistres pour 
une instance de carte. 

Permet de supprimer tous les observateurs enregistres pour 
un evenement d'une instance de carte. 

Permet de supprimer un observateur en utilisant un objet repre- 
sentant un observateur enregistre, ce dernier objet etant 
retourne par les methodes addLi stener, addDomLi stener, 
bind et bindDom lors d'un enregistrement d'observateur. 

Permet de declencher un evenement particulier pour une 
instance de carte. Cette methode est particulierement utile 
pour tester une application utilisant Google Maps. 



L'instance de la source correspond a l'instance sur laquelle sont ajoutes des observateurs 
d'evenements. Elle ne correspond done pas necessairement a l'instance de la carte et peut 
etre, par exemple, une instance d'un marqueur. 

Le code suivant illustre l'utilisation respective des methodes addListener, bind et remove- 
Listener ann d'enregistrer (reperes O) et desenregistrer des observateurs (reperes ©) 
pour I'evenement moveend : 

var divCarte = document. getElementByldt "carte") ; 

var carte = new GMap2(di vCarte) ; 

(...) 

//Definition et enregistrement du premier observateur 

var observateurl = GEvent. addListener(carte, "moveend", functionO {<-© 

(...) 
}); 

//Definition de la classe MaClasse 
function MonGestionnaireCarte( ) { 



}; 

MonGestionnai reCarte.prototype.tra iter Evenement 
(...) 



function( ) 
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var gestionnai re = new MonGestionnaireCarteC ) ; 
//Definition et enregistrement du second observateur 
var observateur2 = GEvent .bind(carte, "moveend", 

MonGestionnaireCarte, gestionnai re.traiterEvenement) ; <-0 
(...) 

//Desenregistrement des observateurs precedemment enregistres 
GEvent. remove Li stener(observateurl) ; <-© 
GEvent. remove Li stener(observateur2) ; <-© 

Lorsque l'utilisateur de l'application a fini de se deplacer sur la carte, les fonctions et 
methodes des observateurs sont appelees. 

Les cartes supportent differents evenements sur lesquels des observateurs peuvent etre 
enregistres par 1' intermediate des methodes addListener et bind. Le tableau 13.6 recapi- 
tule les noms de ces evenements. 



Tableau 13.6 Evenements supportes par les cartes 



Code 


Argument de I'observateur 


Description 


addmaptype 


Le type de carte 




Un type de carte a ete ajoute. 


addoverl ay 


Overlay 




Un overlay a ete ajoute sur la carte. 


clearoverlays 


- 




Tous les overlay de la carte ont ete supprimes. 


cl ick 


Overlay, point 




Lutilisateur a clique sur la carte. 


drag 


- 




Lutilisateur est en train de faire un glisser-deposer sur la carte. 


dragend 


- 




Lutilisateur a fini de faire un glisser-deposer sur la carte. 


dragstart 


- 




Lutilisateur a commence a faire un glisser-deposer sur la carte. 


infowindowclose 


- 




Une fenetre d'information est fermee sur la carte. 


infowindowopen 


- 




Une fenetre d'information est ouverte sur la carte. 


load 


- 




La carte a fini de se charger, et la methode i s Loaded renvoie true. Les 
images de la carte peuvent neanmoins etre encore en cours de chargement. 


maptypechanged 


- 




Le type de la carte a ete change. 


tnousemove 


La localisation du 


curseur 


Lutilisateur deplace le curseur de la souris sur la carte. 


mouseout 


La localisation du 


curseur 


Lutilisateur fait sortir le curseur de la souris de la carte. 


mouseover 


La localisation du 


curseur 


Lutilisateur fait entrer le curseur de la souris sur la carte. 


move 


- 




Lutilisateur est en train de deplacer la carte. 


moveend 


- 




Lutilisateur a fini de deplacer la carte. 


movestart 


- 




Lutilisateur a commence a deplacer la carte. 


removemaptype 


Le type de carte 




Un type de carte a ete supprime. 


removeoverl ay 


Overlay 




Un overlay a ete supprime pour la carte. 


zoomend 


Lancien et le nouveau niveau 
de zoom 


Lutilisateur a fini de changer la valeur de zoom de la carte. 
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Les parametres des fonctions ou methodes de gestion des evenements different suivant 
les evenements. Dans l'exemple precedent, l'evenement moveend imposait une fonction 
ou methode sans parametre. L'exemple suivant decrit la mise en oeuvre d'un observateur 
pour l'evenement zoomend : 

var divCarte = document. getElementByldt "carte") ; 

var carte = new GMap2(di vCarte) ; 

(...) 

//Definition de l'observateur 

function traitementZoomendtancienZoom, nouveauZoom) {<-© 

alertC'Ancienne valeur de zoom: "+ ancienZoom); 

alertC'Nouvelle valeur de zoom: "+ nouveauZoom); 
} 

//Enregistrement de l'observateur 
GEvent.addl_istener(carte, "zoomend", traitementCl ick) ; 

La fonction de l'observateur possede desormais deux parametres (repere O), dont le premier 
correspond a l'ancienne valeur de zoom et le second a la nouvelle. 

L'evenement click suit le meme mecanisme et permet de detecter si un clic est realise sur 
la carte ou sur un marqueur, comme dans le code suivant : 

var divCarte = document. getElementByldt "carte") ; 

var carte = new GMap2(di vCarte) ; 

(...) 

//Ajout d'un marqueur 

var point = new GLatl_ng(47.2228, -1.5682); 

carte. addOverl ay (new GMarker( point) ) ; 

//Definition et enregistrement de l'observateur 

function traitementCl ic(marqueur, position) {<-© 

alertC'Clic sur un marqueur: "+ marqueur); 

alertC'Position du clic: "+ position); 
} 
GEvent.addl_istener(carte, "click", traitementCl ic) ; 

Dans le cas ou l'utilisateur clique sur un marqueur, le parametre marqueur de la fonction 
tra i tementCl i c (repere O) est non nul et contient l'instance du marqueur clique. Le para- 
metre position de la meme fonction (repere O) est alors nul. Dans le cas contraire, le 
parametre marqueur est nul, et le parametre position contient la position du clic. 

Les marqueurs supportent en outre differents evenements, sur lesquels peuvent etre enre- 
gistres des observateurs. Si le marqueur est inerte (les valeurs des proprietes cl 1 ckabl e et 
draggabl e correspondent a f al se), aucun des evenements suivants n'est declenche. 

Le tableau 13.7 recapitule les noms de ces evenements. 
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Tableau 13.7 Evenements supportes par les marqueurs 



Code 


Description 


cl ick 


Lutilisateur clique sur le marqueur. 


dblclick 


Lutilisateur double-clique sur le marqueur. 


drag 


Lutilisateur deplace le marqueur par glisser-deposer. 


dragend 


Lutilisateur termine de deplacer le marqueur par glisser-deposer. 


dragstart 


Lutilisateur commence a deplacer le marqueur par glisser-deposer. 


infowindowclose 


line nouvelle fenetre d'information est fermee par I'intermediaire du marqueur. Cet evenement survient 
egalement lorsque cette fenetre est ouverte a nouveau sur un autre marqueur ou sur la carte. 


infowindowopen 


Une nouvelle fenetre d'information est ouverte par I'intermediaire du marqueur. 


mousedown 


L'evenement DOM mousedown est declenche lorsque I'utilisateur presse un bouton de la souris. Cet eve- 
nement n'est pas remonte a la carte. Ainsi, le deplacement de la carte ne se fait pas. 


mouseout 


La souris sort de la zone du marqueur. 


mouseover 


La souris entre dans la zone du marqueur. 


mouseup 


Levenement DOM mouseup est declenche lorsque I'utilisateur relache un bouton de la souris. Cet evene- 
ment n'est pas remonte a la carte. Ainsi, aucune confusion n'intervient avec le deplacement de la carte. 


remove 


Le marqueur est supprimede la carte par I'intermediaire des methodes removeOverlay et clearOverlays 
de laclasse GMap2. 



L'enregistrement d'observateurs pour un marqueur se realise de la meme maniere que pour 
les cartes, par I'intermediaire de la classe GEvent. Le code suivant met en ceuvre l'enregis- 
trement d'observateurs pour les evenements cl 1 ck et mouseover : 

var divCarte = document. getElementById( "carte" ) ; 

var carte = new GMap2(divCarte) ; 

(...) 

//Ajout d'un marqueur 

var point = new GLatLng(47.2228, -1.5682); 

var marqueur = new GMarker(point) 

carte. addOverl ay (marqueur) ; 

//Definitions et enregistrements des observateurs 

GEvent. addListener(marqueur, "dblclick", functionO { 

alert( "Declenchement de l'evenement dblclick"); 
}); 
GEvent. addListenertmarqueur, "mouseover", functionO { 

alert( "Declenchement de l'evenement mouseover"); 
}); 

Un marqueur peut detecter l'evenement correspondant a la fermeture d'une fenetre d'infor- 
mation. Cet evenement est declenche par I'intermediaire du bouton Fermer ou suite a un 
appel de lamethode closeWindowInfo des classes GMap2 ou GMarker. 
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Le code suivant illustre la mise en ceuvre de ce mecanisme : 

var divCarte = document. getElementById( "carte") ; 

var carte = new GMap2(di vCarte) ; 

(...) 

//Ajout d'un marqueur 

var point = new GLatl_ng(47.2228, -1.5682); 

var marqueur = new GMarker(point) 

carte. addOverl ay (marqueur) ; 

//Ajout d'une fenetre d'information 

marqueur. openlnfoWindowHtml ( "Line fenetre d'information"); 

//Definitions et enregistrements des observateurs 

GEvent.addl_istener(marqueur, "infowindowclose" , functionO { 

alertC'Declenchement de 1'evenement infowindowclose"); 
}); 

Extensions 

Plusieurs extensions sont disponibles pour enrichir les fonctionnalites de Google Maps. 
Le site de Make Williams en donne une liste non exhaustive, a l'adresse : 

http://www.econym.demon.co.uk/googlemaps/extensions.htm. 

Nous ne detaillons dans cette section que l'extension permettant d'utiliser des formes de 
zones personnalisees en se fondant sur des images translucides. 

Extension Elnsert 

Make Williams fournit une interessante extension a Google Maps permettant d'utiliser 
des formes personnalisees sur des cartes. Lobjectif est de pouvoir utiliser n'importe 
quelle figure sous forme d' image translucide sur une carte. 

L'extension Elnsert et sa documentation sont accessibles a l'adresse http://www.econym. 
demon.co.uk/googlemaps/einsert.htm. Cette extension s'installe simplement dans une page par 
le biais d'une balise script classique, comme dans le code suivant : 

<html> 
<head> 
(...) 

<script type=" text/ javascript" src="einsert . js"X/script> 
(...) 
</head> 
(...) 
</html> 

Nous allons mettre en ceuvre une forme permettant de delimiter une zone circulaire 
autour d'un point. Le code suivant illustre 1' implementation de cette fonctionnalite : 

var carte = new GMap2(document.getElementById("carte") ) ; 

(...) 

carte. setCenter(new GLatLng(47. 21257, -1.54769), 11); 

var centreForme = new GLatLng(47. 21257, -1.54769) ; <-© 

var imageForme = "circle. png" ; <—© 

var tailleForme = new GSize(800,800) ; <-© 

var zoomForme = 13;<-© 
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Ivar zoned rculaire = new EInsert(centreForme, imageForme, tail leForme, 
*»zoomForme) ; <-© 
carte.addOverlay(zoneCirculai re) ; 

Le tableau 13.8 recapitule les differents parametres du constructeur (repere O) de la 
classe EInsert utilisee dans le code ci-dessus. 

Tableau 13.8 Parametres du constructeur de la classe EInsert 



Parametre Description 

centreZone Specifie la position sur laquelle la forme est centree. Dans I'exemple ci-dessus, la forme est centree sur le 

centre de Nantes (repere ©). 

imageZone Specifie le chemin du fichier dans lequel la forme est stockee. Dans I'exemple ci-dessus, la forme de la zone 

est stockee dans une image translucide (repere ©) correspondant a un cercle. 

tai 1 1 eZone Specifie la taille avec laquelle la forme est affichee. Dans I'exemple ci-dessus, I'image est utilisee avec une 

largeur et hauteur de 800 (repere ©). 

zoomZone Specifie le zoom avec lequel la forme est affichee (repere ©). 

zi ndexZone Specifie I'ordre d'empilement des formes. Ce parametre peut prendre les valeurs suivantes : 

- -1 : la forme se situe en dessous des autres formes de Google Maps. 

- 1 : la forme se situe au-dessus des autres formes de Google Maps. 

- : se fonde sur I'ordre des appel a la methode addOverl ay. 

-autre : permetde specifier I'empilement de differentes instances de la classe EInsert. 

La classe EInsert offre les methodes hide et show permettant respectivement de masquer 
et de rendre visible la forme. 

La figure 13.7 illustre la mise en oeuvre de cette extension. 



Figure 13.7 
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Support de Google Maps dans dojo 

La bibliotheque dojo fournit un support pour Google Maps par l'intermediaire du 
composant graphique dojo. widget. GoogleMap. 

La bibliotheque masque totalement la specification du lien vers le fichier JavaScript 
contenant l'interface de programmation de l'outil. Le composant ajoute alors automati- 
quement une balise scri pt permettant l'acces a cette API. 

Le code suivant illustre la mise en oeuvre de ce support dans une page HTML. La cle 
d'utilisation est specifiee au niveau de l'objet djConfig (repere O). L'importation du 
composant se realise par l'intermediaire de la methode dojo. requi re (repere ©) : 

<html> 
<head> 
(...) 

<script type="text/javascript"> 
var djConfig={ 

i Debug: true, 
googleMapKey : "maCle"<-0 
}; 
</script> 

<script type=" text/ javascript" src=". ./. ./dojo. js"X/script> 
<script type=" text/ javascript") 

dojo. requi ret "dojo. widget. GoogleMap" ) ; <-© 
</script> 
(...) 
</head> 
(...) 
</html> 

Le module dojo .wi dget . Googl eMap de dojo permet d'inserer une carte dans une page Web. 
II fonctionne de la meme maniere que ceux decrits au chapitre 1 1 , et les memes techniques 
peuvent etre mises en oeuvre afin de le manipuler. 

Le code suivant decrit 1' utilisation de ce module : 

<html> 
(...) 
<body> 
(...) 
<div dojoType="googlemap" id="carte" 

class=" carte" control s="smal lmap"X/div> 
(...) 
</body> 
</htm1> 

Le composant offre la possibility de specifier les differents elements de controle de la carte 
par le biais de son attribut control s. 



Google Maps 



Chapitre 13 

Pour definir la largeur et la hauteur de la carte ainsi que ses bordures, un style CSS doit 
etre specifie pour la carte par le biais de son attribut class. Le style de la carte ci-dessus 
est le suivant : 

.carte{ 

width: 100%; 

height:400px; 

border:lpx solid black; 
} 

Le composant offre en outre la possibility de charger des marqueurs pour la carte en se 
fondant sur un simple tableau HTML. La correlation entre le composant et les donnees se 
realise par le biais de l'attribut datasrc, qui fait reference a 1'identifiant du tableau. 

Le code suivant decrit la mise en oeuvre de cette fonctionnalite : 

(...) 

<div dojoType="googlemap" id="carte" 

class=" carte" dat a src="mes Donnees "></div> 
<table id="mesDonnees"> 
<thead> 
<tr> 

<th>Lat</th><-0 
<th>Long</th><-0 
<th>Icon</th> 
<th>Description</th><-© 
</tr> 
</thead> 
<tbody> 
<tr> 

<td>47.18737</td><-© 
<td>-1.5470K/td><-@ 
<td></td> 

<tdXdiv>Commune de Reze.</di vX/td><-0 
</tr> 
<tr> 

<td>47.1701K/td><-© 
<td>-1.47834</td><-© 
<td></td> 

<tdXdiv>Commune de Vertou.</divX/td><-0 
</tr> 
</tbody> 
</table> 

Les colonnes de l'en-tete du tableau permettent de specifier l'emplacement des donnees 
de longitude et de latitude des marqueurs (reperes ©) dans le tableau, avec respectivement 
les codes Long et Lat (reperes O), ainsi que le texte de la bulle d'information (reperes 0) 
qui leur est associee par l'intermediaire du code Description (reperes ©). 

La carte contenue dans le composant est accessible par l'intermediaire de la propriete map 
de type GMap2. En se fondant sur cette instance, toutes les fonctionnalites decrites aux 
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sections precedentes sont applicables. Ann de les mettre en ceuvre, il est conseille d'etendre 
le composant avec les fonctionnalites de dojo. 



Etude de cas 



Nous detaillons dans cette section la maniere de positionner des sites sur une carte 
Google Maps pour le perimetre geographique affiche par le biais de marqueurs et de 
bulles d' information. 

Nous verrons par la suite comment specifier la position d'un site. 



Recherche geographique de sites 

L'objectif de cette fonctionnalite est d'afficher tous les sites ou ceux d'un certain type, 
qui sont localises dans le perimetre geographique affiche par la carte. 

Ce mecanisme permet de ne pas positionner les marqueurs des sites dont la position ne se 
situe pas dans la zone affichee par la carte. La consommation memoire de l'application 
s'en trouve d'autant allegee. 

Cette fonctionnalite est implementee par le biais de la classe AfficherSites. Cette classe 
se fonde sur la carte et s'y enregistre en tant qu'observateur pour les evenements moveend, 
correspondant a une fin de deplacement de la carte, et zoomend, correspondant a une fin de 
modification du niveau de zoom. Ce dernier observateur permet de ne pas surcharger la 
carte, car les sites ne sont affiches que si le niveau de zoom de la carte est superieur a 10. 

L'instance de cette classe doit etre initialisee avec la carte utilisee ainsi qu'avec une 
instance du formulaire de saisie des criteres de filtrage, l'instance affichant elle-meme les 
marqueurs correspondant aux positions des sites sur la carte. 

Le code suivant decrit 1' implementation de la classe AfficherSites : 

function AfficherSites(carte, formulaire) { 

this. carte = carte; 

this.formulai re = formulaire; 

this.marqueursSites = {); 

this.fenetrelnformationOuverte = false; 

this.zoomCourant = 0; 

this. initial isation( ) ; 
} 

AfficherSites. prototype = { 

initialisation: functionO { 

GEvent.bind(this. carte, "click", this, this.gestionCl iqueCarte) ; 
this.affichageCarteModifieC ) ; 
}, 

gestionCliqueCarte: function(marqueur, point) { 
if( marqueur!=nul 1 ) { 

this.fenetrelnformationOuverte = true; 
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var siteMarqueur = this.marqueursSites[marqueur.getPoint( ) .toStringt )] ; 
marqueur.openlnfoWindowHtml (siteMarqueur.nom+" 
*»<br/>"+siteMarqueur.descriptionCourte) ; 



miseAJourFormulaire: function(extremiteBasseGauche, extremiteHauteDroite) { <- © 

(...) 
}, 
recupererSitesRappel : function (type, sites) {<-© 

this.afficherSites( sites) ; <-© 
), 
recupererSites: functionO {<-© 

(...) 
}, 
afficherSites: function(sites) {<-© 

if( this.fenetrelnformation0uverte==true ) { 

return; 
} 

this.carte.clearOverlays( ) ; 
var zoom = this. carte. getZoomt ) ; 
if( zoom<10 ) { 

return; 
} 

for(var cpt=0; cpt<sites. length; cpt++) { 
var site = sites[cpt] ; 

var localisation = new GLatLng(site.x, site.y); 
var marqueur = new GMarkerdocal isation) ; 
GEvent.addListener(marqueur, "infowindowclose" , functionO { 

this.fenetrelnformationOuverte = false; 
)); 

this.carte.addOver lay (marqueur) ; 
this.marqueursSites[marqueur.getPoint( )] = site; 



affichageCarteModifie: function () {<-0 

var extremites = this. carte. getBoundst ); <-© 

var extremiteBasseGauche = extremites .getSouthWest( ) ; 

var extremiteHauteDroite = extremites. getNorthEastt ) ; 

this.miseAJourFormulai re (extremiteBasseGauche, extremiteHauteDroite) ;«- © 

this.recupererSitest ) ; <-0 
}, 
zoomCarteModifie: function (ancienZoom, nouveauZoom) {<-© 

if( zoom<10 ) { 

this.carte.clearOverl ays( ) ; 



Lorsque l'utilisateur deplace le perimetre geographique affiche, la methode affichage- 
CarteModifie (repere O) de la classe precedente est appelee. Elle calcule tout d'abord les 
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nouvelles limites de la carte (repere ©) afin de mettre a jour le formulaire des criteres par 
l'intermediaire de la methode miseAJourFormulaire (reperes ©). 

Elle execute ensuite une requete Ajax contenant les informations de ce formulaire en 
s'appuyant sur les methodes recupererSites et recupererSitesRappel (reperes 0) afin de 
recuperer la liste des sites dont les coordonnees sont comprises dans le perimetre geogra- 
phique affiche. L'aspect asynchrone des requetes Ajax impose l'utilisation de la methode 
derappel recupererSitesRappel. Par souci de lisibilite, nous avons omis 1' implementation 
de cette methode. 

Pour finir, la methode afficherSites (reperes ©) est appelee afin de construire et d'ajouter 
des marqueurs pour les sites retournes par la requete Ajax. La classe Posi ti onnerSi te supporte 
l'ouverture et la fermeture de fenetres d' information pour les marqueurs positionnes. 

Remarquons la presence de la methode zoomCa rteModi f 1 e (repere ©), qui permet de supprimer 
tous les marqueurs si le niveau de zoom est trop bas. Ce mecanisme permet de ne pas afficher 
un trop grand nombre de marqueurs sur la carte. 

Cette classe est mise en ceuvre dans 1' application de la maniere suivante : 

var carte = (...) 

var formul aireCriteres = document. getElementByldC'criteres") ; 
var afficher = new AfficherSitestcarte, formulai reCriteres) ; 
GEvent.bindtcarte, "moveend", afficher, 

afficher.affichageCarteModifie) ; 
GEvent.bindCcarte, "zoomend", afficher, afficher. zoomCarteModifie) ; 

Positionnement d'un site 

En se fondant sur Google Maps, le renseignement de la position d'un site peut etre 
facilement mis en oeuvre a partir d'une carte en utilisant un marqueur. 

Nous allons structurer cette fonctionnalite sous la forme d'une classe, que nous nomme- 
rons PositionnerSite. Cette classe se fonde sur la carte et s'y enregistre en tant qu'obser- 
vateur de l'evenement cl i ck de cette derniere et observateur de l'evenement dragend pour 
le marqueur positionne. 

L' instance de cette classe doit etre initialisee avec la carte utilisee afin de positionner un 
site ainsi qu'une instance de ce site. Cette derniere instance est avertie d'une modification 
de sa position par l'intermediaire de sa methode miseAJourPosition. 

Le code suivant decrit 1' implementation de la classe PositionnerSite : 

function PositionnerSitetcarte, site) { 

this. carte = carte; 

this.marqueurPositionne = false; <-© 

this. site = site; 

this.marqueurCourant = null; 
} 
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PositionnerSite. prototype = { 

positionnerSite: function (marqueur, point) { 

if( marqueur==nul 1 && this.marqueurPositionne==false ) {<-© 
this.marqeurCourant = new GMarkertpoint, {draggable: true}); 
this, carte. addOverl ay (this, ma rqeurCourant) ; <-© 

GEvent.bind(this .marqeurCourant , "dragend", this, this.deplacerMarqueur) ; 
this.marqueurPositionne=true; <-0 
this.site.miseAJourPositiontpoint.x, point. y) ; <-0 
} else { 

this.carte.removeOverl ay (marqueur) ; <-© 
GEvent. clear Listeners (marqueur, "dragend" ) ; 
this.marqeurCourant = null; 
this.marqueurPositionne=false; <-© 
this.site.miseAJourPosition(0, 0) ; <-0 
} 
), 
deplacerMarqueur: functionO { 

var point = this. marqeurCourant. getPointt ) ; 
this.site.miseAJourPositiontpoint.x, point. y) ; <-0 



La classe empeche 1' utilisation de plusieurs marqueurs pour cette fonctionnalite. Son 
attribut marqueurPosition permet de le garantir (reperes O). S'il n'existe pas, il est ajoute 
pour la position courante (repere ©). 

L' attribut draggable permet de specifier qu'il peut etre deplace par glisser-deposer. Un 
clic sur le marqueur permet de le supprimer (repere ©). 

A chaque modification de la position du marqueur et lors de ses creation et suppression, 
le site est mis a jour avec les nouvelles coordonnees (reperes 0). 

Cette classe est mise en oeuvre dans 1' application de la maniere suivante : 

var carte = new GMap2(document.getElementById("carte" ) ) ; 

(...) 

var site = (...) 

var positionnement = new PositionnerSite(map.site) ; 

GEvent. bind(map, "click", positionnement, positionnement. positionnerSite) ; 



Conclusion 



Google Maps est un puissant outil JavaScript, qui permet d'ajouter d'interessantes fonc- 
tionnalites cartographiques a une application JavaScript. L' interaction entre cette 
derniere et l'outil est particulierement fine, puisque 1' application peut etre avertie des 
moindres manipulations effectuees par un utilisateur sur une carte affichee. 

Les developpeurs de cet outil se sont fait un point d'honneur de fournir une API de 
programmation simple, extensible et facile d'utilisation. 
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L'utilisation de Google Maps nous a permis de decrire un exemple d'utilisation d'API 
JavaScript externe dans une application JavaScript. De nombreux autres outils fournis- 
sent des API similaires permettant d'acceder a un service. 
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Services offerts 
par Yahoo! et Amazon 



Des societes telles que Yahoo! et Amazon mettent a la disposition d' applications externes 
des services donnant acces a des donnees de leur systeme d'information, et ce par l'inter- 
mediaire de 1' architecture REST (Representational State Transfert). 

Ces services permettent d'echanger des donnees dans des formats tels que XML et 
JSON, rendant ainsi possible de les utiliser directement dans des applications JavaScript. 
Dans ce cas, les techniques Ajax doivent etre mises en oeuvre afin d'appeler ces services 
et de recuperer les donnees en retour. 

Ce chapitre detaille les mecanismes a mettre en ceuvre pour utiliser dans des applications 
JavaScript des services de ce type accessibles par Internet. 



Yahoo! 



Yahoo! offre divers services gratuits et payants en ligne. Creee en 1995 en tant qu'annuaire 
de sites, Yahoo! a connu une telle popularite que de nouveaux sites sont venus s'aj outer a 
F annuaire afin de le transformer petit a petit en portail Internet. Ces services sont notamment 
les messageries (Web et instantanee), l'hebergement de listes de diffusion, ainsi que divers 
portails d'information. 

Yahoo! met a disposition plusieurs services sur Internet autour notamment des problema- 
tiques de la cartographie, de la recherche Web, de la musique et des informations par 
F intermediate de 1' architecture REST. L'objectif est d'offrir aux applications la possibilite 
d'interagir avec ces services. 
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Le tableau 14.1 recapitule les principaux services de Yahoo! ainsi que leurs adresses 
d'execution et de documentation. 

Tableau 14.1 Principaux services mis a disposition par Yahoo! 



Nom Description 

Map Image Permet de calculer une carte a partir de coordonnees geographiques. Adresse d'execution : 

http://api.local.yahoo.com/MapsService/V1/maplmage. 
Documentation : http://developer.yahoo.com/maps/rest/V1/maplmage.html 

Geocode Permet de retourner les coordonnees d'un lieu a partir de son adresse. Adresse d'execution : 

http://api. local.yahoo. com/MapsService/V1 /geocode. 
Documentation : http://developer.yahoo.com/maps/rest/V1/geocode.html 

Web Search Execute une recherche Internet en se fondant sur le moteur de recherche de Yahoo!. 
Adresse d'execution : http://api.search.yahoo.com/WebSearchService/V1/webSearch. 
Documentation : http://developer.yahoo.com/search/web/V1/webSearch.html. 

Artist Search Recherche un artiste en se fondant sur diverses informations (nom, etc.). 

Adresse d'execution : http://api.search.yahoo.com/AudioSearchService/V1/artistSearch. 
Documentation : http://developer.yahoo.com/search/audio/V1/artistSearch.html. 

Album Search Recherche un album musical en se fondant sur diverses informations (nom, etc.). 

Adresse d'execution : http://api.search.yahoo.com/AudioSearchService/V1/albumSearch. 
Documentation : http://developer.yahoo.com/search/audio/V1/albumSearch.html. 

News Search Realise une recherche dans une base relative a I'actualite. Adresse d'execution : 
http://api.search.yahoo.com/NewsSearchService/V1/newsSearch. 
Documentation : http://developer.yahoo.com/search/news/V1/newsSearch.html. 



Pour utiliser ces differents services, un enregistrement est necessaire aupres de Yahoo!, a 
1' adresse http://developer.yahoo.com/register/. Un identifiant peut alors etre cree afin d' identifier 
1' application aupres de Yahoo! a 1' adresse http://api.search.yahoo.com/webservices/register_application. 
Cet identifiant doit etre specifie a chaque appel de service. 

Nous allons detailler les services mis a disposition par Yahoo! relatifs a la recherche sur 
Internet et a la musique. Nous decrirons ensuite la facon de les utiliser dans une applica- 
tion Web en se fondant sur le langage JavaScript. 



Service de recherche Internet 

Le principal service offert par Yahoo! concerne la recherche sur Internet en utilisant le 
moteur de recherche de Yahoo!. 

La documentation relative a ce service est disponible a 1' adresse http://developer.yahoo.com/ 
search/web/V1/webSearch.html. Elle decrit les differents parametres utilisables ainsi que la 
structure des donnees contenues dans les reponses. 

Les parametres d'invocation de ce service sont recapitules au tableau 14.2. 
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Tableau 14.2 


Propriete 


Type 


adult_ok 


appid 


Chaine de caracteres 


cal lback 


Chaine de caracteres 


country 


Code ISO 



format 



language 



1 i cense 



output 



Code ISO 



Chaine de caracteres 



query 


Chaine de caracteres 


region 


Code ISO 


results 


Entier 


similar_ok 


site 


Chaine de caracteres 


start 


Entier 


subscrip- 
tion 


Valeur 


type 


Lisle de valeurs 



Parametres du service de recherche Internet 

Description 

Specifie si le contenu pour adultes est autorise dans les resultats. Aucune valeur 
(valeur par defaut) I'interdit, tandis que la valeur 1 1'autorise. 

Correspond a I'identifiant de I'application utilisatrice. Ce parametre est obligatoire. 

Specifie le nom de la fonction de rappel a utiliser pour passer les donnees. 

Specifie le pays des pages recherchees. Aucune valeur (par defaut) autorise tous les 
pays. Sinon, le code ISO des pays doit etre utilise, comme f r pour le frangais. 

Specifie le type de fichiers correspondant a la recherche. Par defaut, tous les types 
sont pris en compte (valeur any). Les types de fichiers peuvent etre specifies : msword 
(Microsoft Word), pdf, ppt (Microsoft PowerPoint), rss (fichier de syndication), txt 
(fichier texte) et xl s (Microsoft Excel). 

Specifie le langage dans lequel le resultat est ecrit. Aucune valeur (par defaut) autorise 
tous les langages. Sinon, le code ISO des langues doit etre utilise, comme f r pour le 
frangais. 

Specifie la ou les licences Creative Commons du contenu recherche. Les valeurs pos- 
sibles sont any, cc_any, cc_commercial ou cc_modifiable. 

Specifie le format de retour souhaite pour les donnees. La valeur par defaut est xml 
pour le format XML. Le format JSON est supporte par le biais de la valeur i son. 

Specifie la chaine de recherche. Cette derniere doit etre encodee en UTF-8. 

Specifie le moteur de recherche regional a utiliser. Pour la France, f r doit etre utilise 
(moteur http://fr.search.yahoo.com/). La valeur par defaut est us. 

Specifie le nombre de resultats a retourner. 

Specifie si des resultats avec des contenus similaires sont autorises dans les resultats. 
Aucune valeur (valeur par defaut) I'interdit, tandis que la valeur 1 1'autorise. 

Specifie le domaine des pages recherchees. Aucune valeur (par defaut) ne restreint 
pas la recherche. Plusieurs domaines peuvent etre specifies en concatenant le domaine 
avec le caractere &. 

Specifie la position de debut dans les donnees. 

Specifie si la recherche doit porter sur une source particuliere de contenu, telle que le 
Wall Street Journal (wsj). La liste complete de ces sources est disponible a I'adresse 
http://developer.yahoo.com/search/subscriptions.html. 

Specifie le type de recherche a soumettre : 

-all, pour des resultats correspondant a tous les mots de recherche ; 

- any, pour des resultats correspondant au moins a un mot ; 

- phrase, pour des resultats contenant la phrase telle quelle. 



Le lien suivant permet de rechercher le mot « JavaScript » dans le moteur de recherche 
de Yahoo! et d'en afficher les deux premiers resultats : 

http://api.search.yahoo.com/WebSearchService/V1/webSearch?appid=YahooDemo&query=JavaS- 
cript&results=2 

Les donnees retournees sont par defaut au format XML, et leur balise de base est Resul t- 
Set. Cette derniere possede les attributs totalResultsAvalaible, total ResultsReturned et 
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firstPositionResult, qui correspondent respectivement au nombre total d'elements 
correspondant a la recherche, au nombre retourne et a la position du premier element 
dans la recherche. Notons que le format JSON est supports pour ce service. 

Plusieurs elements peuvent etre retournes par ce service dans des blocs delimites par la 
balise Result. 

Le tableau 14.3 recapitule les differents champs contenus dans ces elements. 



Tableau 14.3 Champs retournes par le service de recherche 



Propriete 


Description 


Cache 


Correspond a I'adresse du resultat mis en cache. 


ClickUrl 


Correspond a I'adresse a utiliser si la page doit etre accedee par I'intermediaire d'un lien dans une liste 
de resultatsde recherche. Elle permetaYahoo! d'optimiser son service de recherche. 


MimeType 


Correspond au type MIME de la page. 


ModificationDate 


Correspond a la derniere date de modification de la page. 


Summary 


Correspond au resume de la page Web. 


Title 


Correspond au titre de la page Web. 


Url 


Correspond a I'adresse de la page. 



Le code suivant donne un exemple de donnees recues au format XML lors de l'invoca- 
tion de ce service pour la chaine de recherche « JavaScript » : 

<ResultSet xsi :schemal_ocation="urn:yahoo:srch (...)" 
type="web" <-© 

total ResultsAvailable="354000000" 
total Resul tsReturned="2" 
fi rstResul tPosition="l" 
moreSearch="( ...)"> 
<Result><-@ 
<Title> 

JavaScript.com (TM) - The Definitive JavaScript 
Resource: JavaScript Tutorials, Free Java Scripts, 
Source Code and . . . 
</Title> 
<Summary> 

Resource for tutorials, scripts, and more. 
</Summary> 

<Url>http://www. javascript.com/</Url> 
<ClickUrl>http://uk.wrs. yahoo. com/_yl t=( . . . K/Cl ickUrl> 
<Displ ayUrl>www. javascript. com/</DisplayUrl> 
<ModificationDate>1157266800</ModificationDate> 
<MimeType>text/htmK/MimeType> 
<Cache> 

<Url >http://uk.wrs. yahoo. com/_yl t=A9h( . ..)</Url> 
<Size>6024K/Size> 
</Cache> 
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</Result> 
<Result><-© 
<Title> 

JavaScript Source: Free JavaScripts, Tutorials, Example 

Code, Reference, Resources, And Help 
</Title> 
<Summary> 

Cut and paste JavaScript library with source code. 
</Summary> 

<Url>http://javascript.internet.com/</Url> 
<ClickUrl>http://uk.wrs. yahoo. com/_yl t=( . . . K/Cl ickUrl> 
<DisplayUrl>javascript.internet.com/</DisplayUrl> 
<ModificationDate>1157266800</ModificationDate> 
<MimeType>text/htmK/MimeType> 
<Cache> 

<Url >http://uk.wrs. yahoo. com/_y 1 t=A9 ( . . . )</Url> 

<Size>56399</Size> 
</Cache> 
</Result> 
</ResultSet> 

Si nous avions specifie json en tant que valeur du parametre output de la requete, les 
donnees auraient ete les suivantes : 

{"ResultSet":{ 

"type" : "web" , <-© 

"total ResultsAvail able": 354000000, 

"total Results Returned" :2, 

"fi rstResul tPosition" :1, 

"moreSearch" :"(...)", 

"Result":[{<-© 

"Title" : "JavaScript.com (TM) - The Definitive JavaScript 

Resource: JavaScript Tutorials, Free Java Scripts, 
Source Code and ... 
"Summary" : "Resource for tutorials, scripts, and more.", 
"Url " : "http:\/\/www. javascript.comV" , 
"CI ickUrl " : "http:\/\/uk.wrs.yahoo.com\/_yl t=( ...)", 
"Display Url " :"www. Java script. com\/" , 
"Modi ficationDate": 1157266800, 
"MimeType" : "text\/html " , 
"Cache": { 

"Url": "http:\/\/uk.wrs.yahoo.com\/_yl t=( ...)", 
"Size": "60241" 
) 
},{<-© 

"Title" : "JavaScript Source: Free JavaScripts, Tutorials, 
Example Code, Reference, Resources, And Help", 
"Summary" : "Cut and paste JavaScript library with source 

code. " , 
"Url": "http:\/\/javascript.internet.com\/" , 
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"CI ickllrl " : "http:\/\/uk.wrs.yahoo.com\/_ylt=( ...)", 
"Modi ficationDate": 1157266800, 
"MimeType" : "text\/html " , 
"Cache" :{ 

"Url " : "http: \/\/uk.wrs.yahoo.com\/_yl t=( ...)", 

"Size": "56399" 



}] 



)) 



Dans les deux exemples de code ci-dessus, le repere © correspond aux informations 
globales de la recherche, telles que le nombre de resultats de la recherche et le nombre de 
resultats retournes. 

Les reperes © et © correspondent aux deux resultats retournes. 

Service de recherche d'albums musicaux 

Un des services offerts par Yahoo! permet de rechercher des informations relatives a des 
albums de musique. 

La documentation relative a ce service est disponible a l'adresse http://developer.yahoo.com/ 
search/audio/V1/albumSearch.html. Elle decrit les differents parametres utilisables, ainsi que la 
structure des donnees contenues dans les reponses. 

Les differents parametres d'invocation de ce service sont recapitules au tableau 14.4. 



Tableau 14.4 Parametres du service de recherche d'albums musicaux 

Description 

Specifie un nom (partiel ou non) d'album a rechercher. 

Specifie un identifiant d'album a rechercher. 

Correspond a I'identifiant de I'application utilisatrice. Ce parametre est obligatoire. 

Specifie le nom de I'artiste de I'album a rechercher. 

Specifie I'identifiant de I'artiste de I'album a rechercher. 

Specifie le nom de la fonction de rappel a utiliser pour passer les donnees. 

Specifie le format de retour souhaite pour les donnees. La valeur par defaut est xml pour 
le format XML. Le format JSON est supporte par le biais de la valeur json. 

Specifie le nombre de resultats a retourner. La valeur par defaut est 1 et le maximum 50. 

Specifie la position de debut dans les donnees. 

Specifie le type de la recherche. Les valeurs possibles sont all pour se fonder sur tous 
les termes, any sur un ou plusieurs et phrase sur la phrase. 



Propriete 


Type 


album 


Chaine de caracteres 


albumid 


Entier 


appid 


Chaine de caracteres 


artist 


Chaine de caracteres 


artistid 


Chaine de caracteres 


cal lback 


Chaine de caracteres 


output 


Chaine de caracteres 


results 


Entier 


start 


Entier 


type 


Texte libre 



Le lien suivant permet de rechercher les albums de la chanteuse Madonna, dont I'identi- 
fiant est XXXXXXP000064565, contenant le mot « Like » et d'en afficher les deux premiers 
resultats : 
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http://api.search.yahoo.com/AudioSearchService/V1/albumSearch?appid=YahooDemo&artis- 
tid=XXXXXXP000064565&album=Like&results=2 

Les donnees retournees sont, par defaut, au format XML, et leur balise de base est Resul tSet. 
Cette derniere possede les attributs total Resul tsAvalaible, total Resul tsReturned et first- 
PositionResult, qui correspondent respectivement au nombre total d'albums correspon- 
dant a la recherche, au nombre retourne et a la position du premier element dans la 
recherche. Le format JSON est supporte pour ce service. 

Plusieurs elements peuvent etre retournes par ce service dans des blocs delimites par la 
balise Resul t. Cette derniere possede l'attribut i d correspondant a l'identifiant de l'album. 

Le tableau 14.5 recapitule les differents champs contenus dans ces elements. 

Tableau 14.5 Champs retournes par le service de recherche d'albums 



Propriete 


Description 


Album 


Description d'un album 


Artist 


Informations sur I'artiste (identifiant et nom) 


Publ isher 


Maison de disques de l'album 


Rel atedAlbums 


Liste des albums relatifs a l'album courant 


Rel easeDate 


Date de sortie de l'album 


Thumbnail 


Informations relatives a I'image de la pochette de l'album (adresse et taille) 


Title 


Titre de l'album 



Le code suivant donne un exemple de donnees recues au format XML lors de 1' invocation de 
ce service pour les albums de la chanteuse Madonna dont le titre contient le mot « like » : 

<ResultSet xsi :schemal_ocation="urn:yahoo:srchma (...)" 
total Resul tsAvai 1 abl e="8" 
total ResultsReturned="2" 
firstResultPosition="l"> 
<Result id="7adc0b0a5cdc84f0e08004dcf8b2c093"> 
<Title>Like A Virgin</Title> 
<Artist id="XXXXXXP000064565">Madonna</Artist> 
<Publ isher>Warner Bros. </ Publ isher> 
<ReleaseDate>2005 09 13</ReleaseDate> 
</Result> 
<Result id="XXXXXXR000532143"> 

<Title>What It Feels Like for a Girl [US CD/12"]</Title> 

<Artist id="XXXXXXP000064565">Madonna</Artist> 

<Publ isher>Warner Bros.</Publisher> 

<ReleaseDate>2001 05 01</ReleaseDate> 

<Tracks>9</Tracks> 

<Thumbnail> 

<UrlX...X/Url> 
<Height>59</Height> 
<Width>60</Width> 
</Thumbnail> 
</Result> 
</ResultSet> 
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Si nous avions specifie json en tant que valeur du parametre output de la requete, les donnees 
auraient ete les suivantes : 

{"ResultSet":{ 

"total Resul tsAvailable" :8, 
"total Resul ts Returned" :2, 
"first Resul tPosition" :1, 
"Resul t":[{ 

"id":"7adc0b0a5cdc84f0e08004dcf8b2c093", 
"Title" : "Like A Virgin", 
"Artist" : { 

"id" : "XXXXXXP000064565" , 
"content" : "Madonna" 
}. 

"Publisher" : "Warner Bros.", 
"ReleaseDate":"2005 09 13", 
"Tracks" :0 
},{ 

"id":"XXXXXXR000532143", 

"Title":"What It Feels Like for a Girl [US CD\/12\"]", 

"Artist": { 

"id" : "XXXXXXP000064565" , 
"content" : "Madonna" 
}. 

"Publisher" : "Warner Bros.", 
"ReleaseDate":"2001 05 01", 
"Tracks" :9, 
"Thumbnail " : { 

"Url" :"(...)", 
"Height": 59, 
"Width": 60 



)] 



)} 



Nous utilisons cette structure de reponse plus loin dans ce chapitre arm de mettre en oeuvre 
ce service. 



Utilisation des services 

Du fait de l'utilisation du langage JavaScript, l'appel aux services de Yahoo! se realise 
par l'intermediaire des techniques Ajax que nous avons abordees au chapitre 5. 

Puisque les services de Yahoo! ne correspondent pas au meme domaine que 1' application 
qui les appelle, un des mecanismes decrits a la section « Contournements des restrictions » 
du chapitre 5 doit etre utilise. 
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La figure 14.1 illustre les mecanismes mis en oeuvre afin d'appeler un service de Yahoo!. 



Page HTML 


Appel du service 


Services Yahoo 
















Execution d'une 

requete Ajax fondee 

sur un ajout de balise 

script 

dynamiquement 






Service 






Execution de la 
fonction de rappel 












Fonction de rappel 

traitant les donnees 

JSON retournees 






Donnees retournees 
au format JSON 

















Figure 14.1 

Mecanismes mis en oeuvre afin d'appeler un service de Yahoo! 

Notons que nous utilisons des reponses au format JSON, qui sont plus facilement utilisables 
dans des applications JavaScript. 



Mise en oeuvre 

Pour mettre en oeuvre Ajax, nous allons utiliser la technique fondee sur la balise script. 
Pour plus de details sur cette derniere, voir le chapitre 5. 

Le code qui nous interesse dans ce chapitre est le suivant : 

function ajouterBal iseScript(adresse) { 

var script = document .createElement( "script") ; 
script. setAttribute( "type" , "text/ javascript") ; 
script.setAttributet "src" .adresse) ; 

var head = document. getElementsByTagName( "head") ; 

head. appendChild( script) ; 
} 
function supprimerBaliseScript(adresse) { 

var head = document. getElementsByTagName( "head") ; 

var script = document .getElementByldCscriptld") ; 

head. removeChild( script) ; 
} 
function executerRequete(adresse, parametres, fonctionDeRappel ) { 

var requete = [] ; 

// Specification de 1 'adresse de la requete 

requete. push (adresse) ; 
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II Specification des parametres de la requete 
var premierParametre = true; 
fort parametre in parametres ) { 

if( premierParametre ) { 
requete. pusht"?") ; 

} else { 

requete. push("&" ) ; 

} 

requete. pushtparametre) ; 

requete. push("=" ) j 

requete. push (parametres [parametre]) ; 

premierParametre = false; 
} 

// Specification de la fonction de rappel 
requete. pus h( "&cal lback="+fonctionDeRappel ) ; 
// Execution de la requete 
ajouterBal iseScript( requete. joint "") ) ; 
// Suppression de la balise utilisee 
supprimerBal iseScriptt ) ; 



1 



A partir de la fonction executerRequete, l'appel du service de recherche d'albums se realise 
de la maniere suivante : 

function fonctionDeRappel (donnees) { 

var resultset = donnees["Resul tSet"] ; 

var results = resultset["Result"] ; 

fortvar cpt=0; cpt<results. length; cpt++) { 
var result - resul ts[cpt] ; 
alert(result["id"]+": "+result ["Title"] ) ; 

} 
} 
var adresse ■ 

"http: //api .search.yahoo.com/AudioSearchService/Vl/albumSearch" ; 
var parametres = { 

appid: "YahooDemo", 

artistid: "XXXXXXP000064565" , 

album: "Like", 

output: "json", 

results: "2" 
}; 
executerRequetetadresse, parametres, "fonctionDeRappel"); 



Support de la bibliotheque dojo 

La bibliotheque dojo supporte les differents services de Yahoo! par 1' intermediate de son 
module dojo . rpc . YahooServi ce. Les services supportes sont decrits dans le fichier yahoo.smd, 
localise dans le repertoire src/rpc de la distribution de dojo. 

Le module dojo.rpc.YahooService est importe par 1' intermediate du code suivant : 

dojo. requi ret "dojo.rpc.YahooService") ; 
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Ce fichier permet d'associer un service a une methode et de specifier les differents para- 
metres associes. 

Le tableau 14.6 recapitule les methodes relatives aux services de Yahoo!. 
Tableau 14.6 Methodes relatives aux services de Yahoo! 



Methode 


Service associe 




albumSearch 


Album Search 




artistSearch 


Artist Search 




geocode 


Geocode 




maplmage 


Map Image 




newsSearch 


News Search 




songSearch 


Song Search 




webSearch 


Web Search 


I 



L'appel de services Yahoo! se realise de maniere tres simple, comme le montre le code 
suivant, qui realise une recherche sur Internet en se fondant sur Yahoo! : 

function executerRechercheYahoot ) {<-© 

var service = new dojo.rpc.YahooServicet ) ; 
var retour = service. webSearch({"query" : "javascript"} ); <-© 
retour.addCallback(traiterResul tat Recherche) ; <-© 
} 

function traiterResultatRecherche(donnees) {<-© 
var typeRecherche = donnees["type"] ; 
var resultats = donnees["Resul t"] ; 
for(var cpt=0;cpt<resul tats.length;cpt++) (<-© 
var resultat = resultats[cpt] ; 
var titre = resultat["Title"] ; 
var resume = resul tat ["Summary"] ; 
alert(titre+" : "+resume); 



La fonction executerRechercheYahoo (repere ©) contient toute la logique d'appel du service. 
Elle se fonde sur la classe dojo.rpc.YahooService de dojo et appelle le service par l'inter- 
mediaire de sa methode webSearch (repere©). Une fonction de rappel est associee a 
l'appel par l'intermediaire de la methode addCal 1 back (repere ©). 

Lorsque la reponse est recue, cette derniere (repere ©) est appelee avec en parametre les 
donnees de la reponse au format JSON. Ces donnees peuvent alors etre parcourues en 
tant qu'objet en se fondant sur les fonctionnalites offertes par JavaScript (repere ©). 

A aucun moment nous n'avons specifie la technique utilisee afin d'executer la requete. 
dojo met en ceuvre Ajax par l'intermediaire d'une balise script dans ce cas. 
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En resume 



Yahoo! offre de nombreux services permettant d'ajouter du contenu dans des pages Web. 
Ces services sont accessibles grace a 1' architecture REST. Les donnees qu'ils renvoient 
peuvent etre structurees aussi bien au format XML que JSON. 

Puisque le domaine des services de Yahoo! est different de celui de ses pages Web, la 
classe XMLHttpRequest ne peut etre utilise. Les techniques de contournement decrites au 
chapitre 5 doivent done etre mises en oeuvre. 

Des bibliotheques telles que dojo offrent une API masquant les mecanismes a mettre en 
oeuvre pour y acceder. 



Amazon 



Amazon est une societe de commerce electronique dont la specialite la plus connue est la 
vente de livres. Elle permet egalement d'acheter tout type de produits culturels relatifs 
notamment a la musique et au cinema ainsi que recemment de materiels. 

Creee en 1995, cette societe ne fut reellement beneficiaire qu'en 2004. Son originalite 
tient a ce qu'elle ne possede aucun etablissement physique de vente et qu'elle utilise les 
choix des utilisateurs de son site arm de leur proposer des selections d'articles cibles. 

A Tinstar de Yahoo!, Amazon offre la possibility d' acceder a tous les elements de son 
catalogue par le biais d'un service de recherche accessible sur Internet. Amazon fournit 
bien d'autres services, que nous ne detaillons pas dans ce chapitre. 

Ce service de recherche est mis a disposition par le biais de 1' architecture REST, mais, 
contrairement a Yahoo!, les donnees sont structurees au seul format XML. Un service 
XSLT permet toutefois de convertir les donnees dans n'importe quel format. 



Service ECS 



Le seul service mis a disposition par Amazon est ECS (E-Commerce Service), qui donne 
acces a la plupart des informations des differents sites Web d' Amazon. Ces informations 
sont les suivantes : 

• donnees des produits ; 

• commentaires relatifs aux produits saisis par les utilisateurs ; 

• informations sur les vendeurs ; 

• liste des produits de zShops et Marketplace ; 

• caddy d' achats. 

Ce service rend possible differentes operations relatives a ces donnees. 
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Le tableau 14.7 recapitule les principales d'entre elles. 

Tableau 14.7 Principales operations du service ECS 



Operation 




Description 


CustomerConte 


ltLookup 


Permet de recuperer un ensemble d'informations relatives a un client. 


CustomerConte 


itSearch 


Permet d'effectuer une recherche de clients. 


ItemLookup 




Permet de recuperer un ensemble d'informations relatives a un produit en se fondant sur son 
identifiant. 


ItemSearch 




Permet d'effectuer une recherche de produits en se fondant sur differents criteres. 


Sel lerLookup 




Permet de recuperer un ensemble d'informations relatives a un vendeur. 



La documentation de ce service est accessible a l'adresse suivante : 

http://docs.amazonwebservices.com/AWSEcommerceService/2005-03-23/index.html 

Ann d'utiliser les differentes operations de ce service, un enregistrement est necessaire 
aupres d'Amazon a l'adresse http://www.amazon.com/gp/aws/registration/registration-form.html. Une 
cle d'utilisation est ensuite fournie pour le compte a l'adresse http://aws-portal.amazon.com/gp/ 
aws/developer/account/index.html?action=access-key. Cette cle doit etre specifiee lors de l'appel 
des differentes operations mises a disposition par le service. 

Ann de decrire le fonctionnement du service ECS et de ses operations, nous allons tout 
d'abord detailler les differents parametres communs, puis la maniere d'executer des 
operations. Nous finirons par la structure des donnees de resultat. 

Parametres communs du service 

Le service d'Amazon fournit differents groupes de parametres communs a toutes les 
operations : 

• Parametres obligatoires, qui doivent etre presents pour chaque utilisation d'operations. 

• Parametres generaux, qui specifient l'origine de la requete ainsi que les types de donnees 
retournees. 

• Parametres XSL, qui specifient les informations necessaires a 1' utilisation du moteur 
XSLT d'Amazon. 

• Parametres de formatage XML. 

• Parametres destines a faciliter le developpement et le debogage. 

Les tableaux 14.8 a 14.10 recapitulent les parametres obligatoires, generaux et XSL. 

Tableau 14.8 Parametres obligatoires du service ECS 

Parametre Description 

Operati on Specifie I'operation utilisee. 

Service Specifie lenomdu service utilise. Dans notrecas, la valeur AWSECommerceService doit toujours etre utilisee. 

Subscription Id Specifie I'identifiant souscrit par I'utilisateur du service. 
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Tableau 14.9 Parametres generaux du service ECS 

Parametre Description 

Associ ateTag Specifie I'identifiant associe a I'application. Ce parametre permet de determiner le flux de donnees genere 

par I'application relativement au service d'Amazon. 

ResponseGroup Specifie les donnees retournees par I'operation. Ce parametre permet de controler en detail le volume et 
le contenu de la reponse d'une operation. 

Tableau 14.10 Parametres XSL du service ECS 

Parametre Description 

ContentType Specifie le type de format genere par la feuille de style. 

Styl e Specifie la feuille de style a appliquer aux donnees retournees au format XML. 

Detaillons maintenant la facon d'utiliser les operations de base du service ECS d'Amazon. 

Operations 

Nous ne detaillons dans cette section que les fonctionnalites de recherche de produits et 
de recuperation d' informations de produits, correspondant respectivement aux operations 

ItemSearch et ItemLookup. 

Chaque operation du service d'Amazon possede des parametres particuliers a utiliser en 
plus des parametres communs decrits a la section precedente. 

Pour I'operation ItemSearch, l'ensemble de produits dans lequel la recherche s'execute 
doit etre specifie par l'intermediaire du parametre Searchlndex ainsi qu'eventuellement 
un ensemble de mots-cles par le biais du parametre Keywords. 

Le lien suivant permet de rechercher les livres correspondant a la chaine de caracteres 
« Spring par la pratique » : 

http://webservices.amazon.fr/onca/xml?Service=AWSECommerceService&Subscriptionld=Votre_ID 
_ici&Operation=ltemSearch&Searchlndex=Books&Keywords=Spring%20par%20la%20pratique 

Pour I'operation ItemLookup, I'identifiant du produit doit uniquement etre specifie par 
l'intermediaire du parametre Itemld. 

Le lien suivant permet de charger les informations du livre « Spring par la pratique » : 

http://webservices.amazonJr/onca/xml?Service=AWSECommerceService&Subscriptionld=Votre_ID 
_ici&Operation=ltemLookup&ltemld=2212117108 

Donnees 

La structuration des donnees retournees par une operation du service ECS s'applique 
notamment aux operations ItemSearch et ItemLookup. 

Ces donnees sont structurees par l'intermediaire de XML. La balise de base de la reponse 
est ItemSearchResponse, qui englobe des informations relatives a I'operation realisee 
(sous-balise OperationRequest) et aux resultats (sous-balise Items). 



Services offerts par Yahoo! et Amazon 



Chapitre 14 

Dans l'exemple de code suivant, la balise OperationRequest (repere O) reprend tous les 
parametres specifies pour l'operation (repere ©) ainsi que des informations techniques 
(repere ©), telles que le temps d'execution de la requete : 

<ItemSearchResponse> 

<0perat ion Request ><-© 
<HTTPHeaders><-© 

<Header Name="UserAgent" 

Value="Mozilla/5.0 (Windows; U; Windows NT 5.1; 
fr; rv:1.8.0.6) Gecko/20060728 
Firefox/1.5.0.6"/> 
</HTTPHeaders> 

<RequestId>lKDlXBKYDC09V0EQ6F4C</RequestId><-© 
<Arguments><-© 

<Argument Name="Service" Value="AWSECommerceService"/> 
<Argument Name="SearchIndex" Value="Books"/> 
<Argument Name="SubscriptionId" 
Val ue=" Votre_ID_ici"/> 
<Argument Name="Keywords" 

Val ue="Spring par la pratique"/> 
<Argument Name="ResponseGroup" Val ue="Medium"/> 
<Argument Name="0peration" Val ue="ItemSearch"/> 
</Arguments> 
<RequestProcessingTime><-© 

0.0749619007110596 
</ Request Process ingTime> 
</0perationRequest> 
(...) 
</ItemSearchResponse> 

Dans l'exemple suivant, la balise Items (repere O) comprend tous les resultats de la requete 
et integre des informations relatives aux parametres de la requete (sous-balise Request au 
repere ©), au nombre de resultats (sous-balise Total Results au repere ©) et de pages de 
resultats (sous-balise Total Pages au repere 0) ainsi qu'aux elements de resultats eux-memes 
(sous-balise Item au repere ©) : 

<ItemSearchResponse> 

<OperationRequest>( . . . )</0perationRequest> 
<Items><-0 

<Request><-© 

<IsValid>True</IsValid> 
<ItemSearchRequest> 

<Keywords>Spring par la pratique</Keywords> 
<ResponseGroup>Medium</ResponseGroup> 
<SearchIndex>Books</SearchIndex> 
</ItemSearchRequest> 
</Request> 

<Total Resul ts>K/Total Resul ts><- © 
<Total Pages>K/Total Pages><- 
<Item>(...)</Item><-© 
</Items> 
</ItemSearchResponse> 
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Detaillons maintenant les elements compris dans la balise Item correspondant aux donnees 
du resultat de la requete. Comme nous l'avons specifie a la section relative aux parametres 
communs, le service ECS offre la possibility de specifier les blocs de donnees a inclure 
dans le resultat par 1' intermediate du parametre ResponseGroup. Ainsi, ces blocs sont presents 
ou non dans la balise Item. 

Le tableau 14.1 1 recapitule les principales valeurs que peut prendre ce parametre. 
Tableau 14.1 1 Principales valeurs du parametre ResponseGroup 



Valeur 

CustomerReviews 

Editorial Reviews 

Image 
ItemAttributes 

Medium 



Offers 
OfferSummary 

Request 

SalesRank 

Small 



Description 

Specifie que les commentaires des clients relatifs au produit (bloc CustomerRevi ews) doivent etre con- 
tenus dans la reponse. 

Specifie que les commentaires d'Amazon relatifs au produit (bloc EditorialReviews) doivent etre conte- 
nus dans la reponse. 

Specifie que les informations relatives aux images du produit doivent etre contenues dans la reponse. 

Specifie que les informations relatives au produit (bloc ItemAttri butes) doivent etre contenues dans 
la reponse. 

Correspond au groupe de valeurs: Small, Request, ItemAttributes, OfferSummary, SalesRank, 
Editorial Reviews et Image. 

Specifie que les differentes offres pour le produit doivent etre contenues dans la reponse. 

Specifie qu'un resume des differentes offres pour le produit (bloc Of f erSumma ry) doit etre contenu dans 
la reponse. 

Specifie que les informations relatives a la requete (bloc Request) doivent etre contenues dans la reponse. 

Specifie que le rang du produit dans les ventes d'Amazon doit etre contenu dans la reponse. 

Specifie que les informations de base du produit doivent etre contenues dans la reponse. 



Balise 

ASIN 



Plusieurs valeurs peuvent etre combinees pour le parametre ResponseGroup en se fondant 
sur le caractere « , ». 

Le tableau 14.12 recapitule les principaux blocs de donnees pouvant etre presents sous la 
balise Item. 

Tableau 14.12 Principaux blocs de donnees de la balise Item 

Description 

Correspond a I'identifiant unique ASIN (Amazon Standard Identification Number) du produit dans la base 
d'Amazon. 



CustomerRevi ews Correspond aux commentaires d'Amazon relatifs au produit. 

Detai 1 PageURL Correspond a I'adresse de la page detaillant le produit sur le site d'Amazon. 

Editorial Reviews Correspond aux commentaires des clients relatifs au produit. 

Errors Detaille les differentes erreurs survenues lors de la recuperation des donnees du produit. 

ItemAttributes Comprend les caracteristiques et proprietes du produit. 

Largelmage Correspond aux informations relatives a I'image de grande taille du produit. 
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Tableau 14.12 Principaux blocs de donnees de la balise Item (suite) 

Balise Description 

Medi umlmage Correspond aux informations relatives a I'image de taille moyenne du produit. 

Offers Correspond aux informations relatives aux offres pour le produit. 

Offer-Summary Correspond a des statistiques relatives aux offres (nombre de vendeurs, meilleurs prix pour le produit 

neuf, etc.). 

Sal esRank Correspond au rang du produit dans les ventes d'Amazon. 

Smal 1 Image Correspond aux informations relatives a I'image de petite taille du produit. 



Pour les livres, les blocs ItemAttributes et OfferSummary comportent les informations de 
base du produit. Le code suivant donne un exemple de donnees d'un livre : 

<Iteml_ookupResponse> 

<OperationRequest>( . . . )</OperationRequest> 
<Items> 

<Request>( . . . )</Request> 
<Item> 

<ASIN>2212117108</ASIN><-© 
<DetailPageURL><-0 

http: //www. amazon.fr/gp/redi rect.html %3F( . . . ) 
</DetailPageURL> 
<SalesRank>777</SalesRank><-© 
<SmallImage><-0 

<URLX...X/URL> 

<Height Units="pixels">75</Height> 

<width Units="pixels">62</Width> 
</Smal 1 Image> 

<!-- Meme structure pour Mediumlmage et Largelmage --> 
<ItemAttributes><-© 

<Author>Jul ien Dubois</Author> 

<Aut ho r>Jean- Philippe Retail le</Author> 

<Author>Thierry Tempi ier</Author> 

<Binding>Broche</Binding> 

<Creator Role="Preface">Rod Johnson</Creator> 

<EAN>9782212117103</EAN> 

<ISBN>2212117108</ISBN> 

(...) 

<Manufacturer>Eyrol les</Manufacturer> 

<Number0fPages>517</Number0fPages> 

<ProductGroup>Book</ProductGroup> 

<PublicationDate>2006-04-28</PublicationDate> 

<Publisher>Eyrolles</Publisher> 

<Studio>Eyrolles</Studio> 
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<Title> 

Spring par la pratique : Mieux developper ses 
applications Java/J2EE avec Spring, Hibernate, 
Struts, Ajax. . . 
</Title> 
</ItemAttributes> 
<0f f erSummary> <- © 
<LowestNewPrice> 

<Amount>3990</Amount> 
<CurrencyCode>EUR</CurrencyCode> 
<FormattedPrice>EUR 39,90</FormattedPrice> 
</LowestNewPrice> 
<LowestUsedPrice> 

<Amount>3990</Amount> 
<CurrencyCode>EUR</CurrencyCode> 
<FormattedPrice>EUR 39,90</FormattedPrice> 
</LowestUsedPrice> 
<TotalNew>7</TotalNew> 
<TotalUsed>2</TotalUsed> 
<Total Col 1 ecti bl e>0</Total Col 1 ecti bl e> 
<TotalRefurbished>0</TotalRefurbisned> 
</OfferSummary> 
</Item> 
</Items> 
</Iteml_ookupResponse> 

Les informations generates relatives a Amazon se trouvent directement sous la balise 
Item (reperes O), tandis que les informations relatives au livre sont contenues dans la 
balise ItemAttri butes (repere ©). Le prix de l'article est quant a lui compris dans la balise 
OfferSummary (repere ©). 

Utilisation du service 

L'utilisation du service d'Amazon suit les memes principes que ceux decrits pour Yahoo! 
puisque le domaine est la aussi different de celui de 1' application. 

De ce fait, nous utilisons la meme implementation que celle decrite a la section relative a 
l'appel des services de Yahoo!, a savoir la fonction executerRecherche. 

La difference avec Yahoo! est qu' Amazon ne supporte que le format XML pour les 
donnees. Pour utiliser le format JSON dans les applications JavaScript, le moteur XSLT 
d'Amazon doit etre utilise afin de realiser une conversion de format. 

Le service ECS offre la possibility de specifier l'adresse d'une feuille de style qui sera 
appliquee au contenu XML des donnees avant de le retourner a l'initiateur de la requete. 

Nous allons mettre en ceuvre dans cette section une feuille de style specifique afin de 
convertir les donnees XML de l'operation ItemSearch au format JSON. 

La figure 14.2 illustre les mecanismes mis en oeuvre afin d'appeler un service d'Amazon 
selon cette approche. 
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Figure 14.2 

Mecanismes mis en ceuvre afin d'appeler un service d 'Amazon 



La feuille de style utilisee a cet effet se nomme itemSearchJSON.xsl et est decrite dans 
le code suivant : 

<?xml version="1.0" ?> 

<xsl :stylesheet version="1.0" xmlns:xsl="http://www. w3.org/1999/XSL/Transform" 
xml ns : aws="http: //webservi ces . amazon . com/AWSECommerceServi ce/ 
2005-10-05" excl ude-resul t-prefixes="aws"> 
<xsl:output method="text" encoding="IS0-8859-l"/> 
<!-- Ecrire l'appel a la fonction de rappel --> 
<xsl :templ ate match="/"><-© 
<xsl :val ue-of 

sel ect="/aws: I temSearchResponse/aws: Operation Request 
/aws: Argument s/aws: Argument [@Name='Cal 1 back ' ]/@Val ue"/> 
<xsl:text>( </xsl:text> 
<xsl :apply-templates 

select="/aws: ItemSearchResponse/aws: Items"/> 
<xsl:text> ) ;</xsl :text> 
</xsl :template> 

<!-- Traitement des balises Items --> 
<xsl : tempi ate match="aws: Items"><-© 
<xsl:text>{ </xsl:text> 
<xsl :text>"Total Results" : </xsl :text> 
<xsl :val ue-of sel ect=" aws: Total Results"/> 
<xsl:text>, </xsl:text> 
<xsl :text>"Total Pages" : </xsl :text> 
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<xsl : value -of select="aws: Total Pages "/> 

<xsl:text>, </xsl:text> 

<xsl :text>"Items" : [ </xsl:text> 

<xsl :for-each select="aws: I tern" > 

<xsl :apply-templates select="." /> 
<xsl:if test="position( ) != last()"> 

<xsl:text>, </xsl:text> 
</xsl :if> 

</xsl :for-each> 

<xsl :text> ] }</xsl :text> 
</xsl :template> 

<!-- Traitement des balises Item --> 
<xsl : tempi ate match="aws: Item"><-© 

<xsl:text>{ </xsl:text> 

<xsl :text>"ASIN": "</xsl :text> 

<xsl : value-of select="ASIN"/> 

<xsl:text>", </xsl:text> 

<xsl :text>"DetailPageURL": "</xsl :text> 

<xsl :value-of select="Detail PageURL"/> 

<xsl:text>", </xsl:text> 

<xsl :text>" Sales Rank" : "</xsl :text> 
<xsl :value-of select="SalesRank"/> 
<xsl :text>"</xsl :text> 

<xsl :if test="aws: ItemAttributes"> 

<xsl:text>, "ItemAttributes" : </xsl:text> 
<xsl :apply-templates select="aws: ItemAttributes"/> 
</xsl:if> 

<xsl:text> }</xsl:text> 
</xsl :template> 

<!-- Traitement des balises ItemAttributes --> 
<xsl : tempi ate match="aws: ItemAttributes"><-© 
<xsl:text>{ "Author": [ </xsl:text> 
<xsl :for-each select="aws:Author"> 
"<xsl :val ue-of select=" . "/>" 
<xsl:if test="position( ) ! = last()"> 

<xsl:text>, </xsl:text> 
</xsl :if> 
</xsl :for-each> 



<xsl 
<xsl 
<xsl 
<xsl 
<xsl 
<xsl 
<xsl 

</xsl :template> 
</xsl :stylesheet> 



text> ], </xsl :text> 
text>"ISBN": "</xsl:text> 
value-of select="aws: I S B N " / > 
text>" , </xsl :text> 
text>"Title": "</xsl:text> 
value-of select="aws:Title"/> 
text>" }</xsl :text> 



Le template principal (repere O) permet de specifier l'appel a la fonction de rappel et de 
passer en parametre les donnees generees au format JSON. 
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Ces donnees sont generees par les templates aux reperes ©, © et 0, lesquels convertissent 
respectivement les balises Items, Item et ItemAttributes de maniere recursive. 

L'appel du service ItemSearch se realise desormais de la maniere suivante : 

function fonctionDeRappel (donnees) { 
var resultats = resultset["Items"] ; 
for(var cpt=0; cpt<resultats. length; cpt++) { 

var resultat = resultats[cpt] ; 

var attributs = resultat["ItemAttributes"]; 

alert(attributs["ISBN"]+" : "+attributs[ "Title"]) ; 



var adresse = "http://webservices.amazon.fr/onca/xml"; 
var parametres = { 

Service: "AWSECommerceService" , 

Subscription^: "19267494ZR5A8E2CGPR2" , 

Operation: "ItemSearch", 

Searchlndex: "Books", 

Keywords: "Spring!&20par£201a%20pratique" , 

ResponseGroup: "ItemAttributes, Reviews" , 

Style: "http://jsweb2.sourceforge.net/xsl /itemSearchJSON.xsl " , 

ContentType: "text/javascript" 
}; 
executerRequete(adresse, parametres, "fonctionDeRappel ") ;1 

Support de dojo 

Nous avons aborde a la section relative aux services de Yahoo! l'utilisation du module 
dojo.rpc.YahooService. Ann d'acceder aux services d'Amazon, il est possible d'utiliser 
directement le support Ajax de la bibliotheque dojo permettant d'interagir avec le service. 

Le code suivant illustre la mise en ceuvre la fonction dojo.io.bind, decrite au chapitre 7, 
en se fondant sur la feuille de style XSL itemSearchJSON.xsl : 

function fonctionDeRappel (donnees) { 

// Meme code que precedemment 
} 
var parametresService = { 

Service: "AWSECommerceService" , 

Subscription^: "19267494ZR5A8E2CGPR2" , 

Operation: "ItemSearch", 

Searchlndex: "Books", 

Keywords: "SpringS&20par%201a%20pratique" , 

ResponseGroup: "ItemAttributes, Reviews" , 

Style: "http://jsweb2.sourceforge.net/xsl /itemSearchJSON.xsl " , 

ContentType: "text/javascript" , 

Callback: "fonctionDeRappel" 
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var parametres = { 

url : "http://webservices.amazon.fr/onca/xml " , 

mimetype: "text/javascript", 

transport: "ScriptSrcTransport" , 

timeoutSeconds: 10, 

content: parametresService 
}; 
do jo.io. bind (parametres) ; 

Notons que 1' implementation utilisee par la fonction do j o . i o . bi nd est specifiee explicite- 
ment par l'intermediaire de l'attribut transport. Aussi, les modules do jo.io.* et 
dojo.io.ScriptSrcIO doivent etre importes. 

Cette technique aurait egalement pu etre utilisee ann d'appeler les services de Yahoo! 
decrits precedemment. 



En resume 



A l'instar de Yahoo!, Amazon offre de nombreux services permettant d'acceder aux 
donnees de son systeme d' information. Ces dernieres sont accessibles simplement grace 
a 1' architecture REST. 

Les donnees renvoyees ne peuvent etre structurees qu'au format XML, mais Amazon offre 
la possibility de realiser des transformations sur la structure de ces donnees en utilisant la 
technologie XSL. 

Cette derniere peut etre mise en oeuvre ann d' avoir acces a des donnees au format JSON, 
format plus facilement unusable avec le langage JavaScript. II est aussi possible d'effectuer 
la conversion au sein du navigateur Web en utilisant une bibliotheque Javascript specifique. 



Conclusion 



Nous avons parcouru dans ce chapitre differentes techniques permettant d'integrer dans 
des applications JavaScript des donnees de services externes mises a disposition par 
l'intermediaire de 1' architecture REST. 

Linteraction avec de tels services se fonde sur certaines techniques Ajax decrites au 
chapitre 5, techniques devant offrir la possibilite de realiser des requetes vers des sites 
d'autres domaines. 

Nous avons pris l'exemple de services des societes Yahoo! et Amazon, lesquelles ont fait 
le choix de mettre a disposition du public des donnees de leur systeme d'information. 

Bien que les mecanismes d'appel soient similaires dans les deux cas, des specificites se 
presentent au niveau du traitement des donnees refues. Tandis que Yahoo! renvoie des 
donnees aux formats XML et JSON, Amazon offre la possibilite de realiser des transfor- 
mations ann de convertir les donnees en un format gerable par 1' application. 
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Outils annexes 



Cette partie presente un certain nombre d' outils qui facilitent la mise en oeuvre 
a" applications JavaScript et la verification de leur bon fonctionnement dans differents 
navigateurs Web. 

Le chapitre 15 aborde la mise en oeuvre des tests unitaires dans les applications 
JavaScript a partir de l'outil JsUnit et d' implementations de simulacres d'objets (mock 
objects). L'objectif est d'automatiser la verification du bon fonctionnement des 
composants JavaScript. 

Le chapitre 16 decrit differents outils proposes par la communaute Open Source afin 
de developper, deboguer et documenter des applications JavaScript. Ces outils fournis- 
sent des aides precieuses pour ameliorer les temps de developpement et la robustesse 
des applications. Ce chapitre aborde en outre la problematique de la reduction du 
poids des scripts JavaScript. 



15 



Tests d'applications 

JavaScript 



Tout au long des chapitres precedents, nous avons decrit la facon d'utiliser le langage 
ainsi que les bibliotheques JavaScript afin de developper des applications evoluees pour 
le Web 2.0. 

Dans le present chapitre, nous nous penchons sur la facon de mettre en oeuvre des tests 
d'applications JavaScript dans le but de detecter les non-regressions et de verifier le bon 
fonctionnement des applications dans differents navigateurs. 

Nous verrons que l'outil JsUnit permet d'automatiser facilement l'execution de ces tests. 
Les erreurs detectees peuvent etre globales ou specifiques a un navigateur, chaque navi- 
gate ur ay ant des f aeons specifiques d' interpreter JavaScript. 

Les tests unitaires 

Cette section traite de la facon de mettre en oeuvre des tests unitaires en utilisant l'outil 
Open Source JsUnit. 

Apres avoir detaille 1' installation de l'outil, nous decrivons la structure des cas de tests 
ainsi que les API disponibles afin de verifier la validite des traitements, de creer des 
suites de tests et de charger des donnees specifiques aux tests. 

Mise en oeuvre de JsUnit 

JsUnit est un framework Open Source ecrit en JavaScript et Java, dont le createur est 
Edward Hieatt. II appartient a la longue liste des frameworks xUnit, qui ont pour objectif 
le test d'applications pour une technologie ou une problematique donnee. 
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JsUnit correspond a un portage de l'outil de test des applications Java JUnit, dont le 
developpement a debute en 2001. Son objectif est d'adapter les differents concepts de 
JUnit afin de tester des applications JavaScript. 

Comme nous le verrons tout au long de ce chapitre, il fournit aussi bien un cadre de deve- 
loppement des tests unitaires que des outils permettant d'executer les tests dans differents 
environnements et navigateurs. L'outil est disponible a l'adresse http://www.jsunit.net/. 

Apres avoir telecharge et decompresse dans un repertoire la version 2.2 alpha 11, nous 
obtenons l'arborescence de la distribution illustree a la figure 15.1. 
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Figure 15.1 

Structure de la distribution de JsUnit 

Dans le repertoire jsunit/ de la distribution se trouve le fichier principal du lanceur 
HTML de tests, ainsi que les taches Ant de JsUnit, elements que nous detaillerons par la 
suite. 

Le repertoire app/ et son sous-repertoire contiennent les differentes bibliotheques Java- 
Script de JsUnit ainsi que les differents fichiers HTML et styles utilises par le lanceur 
HTML. Les repertoires ess/ et images/ contiennent egalement des elements utilises par 
ce dernier. 

Le repertoire bin/ contient des scripts permettant de lancer et de fermer des navigateurs 
sur differents systemes d' exploitation. Le repertoire Java/ contient les sources du serveur 
de JsUnit ainsi que ses tests unitaires. Pour finir, le repertoire tests/ contient des exemples 
de tests unitaires JavaScript fondes sur JsUnit. 

Pour fonctionner correctement, JsUnit necessite des navigateurs supportant une version 
de JavaScript superieure ou egale a 1.4. D'apres la documentation de l'outil, JsUnit supports 
l'ensemble des navigateurs recenses au tableau 15.1. 

Afin d'utiliser son serveur et ses taches Ant, l'outil necessite une machine virtuelle Java 
superieure ou egale a 1 .4. 
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Tableau 15.1 Navigateurs et systemes d'exploitation supportes par JsUnit 



Navigateur 

Internet Explorer 

Konqueror 

Mozilla 



Version et systeme d'exploitation 

Version 5.5+ sur Windows NT, 2000, XR MacOS 9 et MacOS X 

Version 5+ sur KDE 3.0.1 (Linux) 

Version 0.9.4+ sur tous les systemes d'exploitation (incluant tous les navigateurs fondes sur 
Gecko, dont Firefox 0.9+ et Netscape 6.2.3+) 



Les cas de test 



Detaillons maintenant la facon dont les cas de test doivent etre implemented, aussi bien 
au niveau de leur structure que de leur gestion du contexte d' execution. 

Structure d'un cas de test 

Arin de mettre en oeuvre un test unitaire, nous allons implementer une classe StringBuf- 
fer, dont la fonctionnalite est de concatener des chaines de caracteres. Elle reprend les 
principes de la classe Java du meme nom mais en beaucoup plus simple, puisque seules 
les methodes append, clear et toString sont implementees. 

Le code suivant derinit la structure de cette classe : 

function StringBuffer( ) { 

this.chaineslnternes = []; 
} 
StringBuffer. prototype. append = function(chaine) { 

thi s. chaines Internes. push (chaine) ; 
}; 
StringBuffer. prototype. clear = functionO { 

this. chaines I nternes.spl ice(0, this. chaines Internes. length) ; 
}; 
StringBuffer. prototype. toString = functionO { 

return this.chaineslnternes. joint "") ; 
); 

Notre cas de test doit etre derini dans une page HTML classique, dont le squelette doit 
etre le suivant arm d'importer le framework JsUnit et de fournir une description du test : 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 

<meta http-equiv="Content-Type" 

content="text/html ; charset=UTF-8"> 
<title>Tests JsUnit: StringBuffer</title> 
<link rel="stylesheet" 

type=" text /ess" href ="css/jsUnitStyle. ess "/> 
<script language=" JavaScript" 

type=" text/ javascript" src="app/jsUnitCore. js"/> 
<script language="JavaScript" type="text/javascript"> 

(...) 
</script> 
</head> 
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<body> 

<hl>Tests JsUnit: StringBuffer</hl> 

<p>Cette page contient les tests relatifs a la classe 
StringBuffer. </p> 
</body> 
</html> 

Le code du test doit etre contenu dans la balise scri pt et comporter par defaut des fonctions 
dont le nom est prefixe par test. 

Le code suivant illustre la mise en oeuvre d'un test permettant de verifier le bon fonction- 
nement des methodes append et toString de la classe StringBuffer : 



<!D0CTYPE HTML PUBLIC 



'-//W3C//DTD HTML 4.01 Transitional //EN" 
'http://www.w3.org/TR/htrnl4/loose.dtd"> 



<html> 
<head> 

<meta http 
conte 
<title>Test 
< 1 ink rel = 
type 
<script Ian 
type= 
<script Ian 
type 
<script Ian 
functio 
var 
sb 
sb 
sb 
ass 
ass 
ass 
ass 



equiv=" Content -Type" 

nt="text/html ; charset=UTF-8"> 

s JsUnit: StringBuffer</title> 

stylesheet" 

"text/ess" href="css/jsUnitStyle.css"/> 

guage="JavaScript" 

"text/ Java script" src="app/jsUnitCore. js"/> 

guage="JavaScript" 

text/javascript" 
guage="JavaScript 
n testAppend( ) { 

sb = new StringBuffer( ) ; 
appendC'paraml") ; 
append (" - "); 
append("param2") ; 

ert Equal stsb.chaines Internes. length, 3) ; 
ert Equal stsb.chaines Internes [0] , "pa rami 
ertEquals(sb.chainesInternes[l] , " - "); 
ert Equal stsb.chaines Internes [2] , "param2 



src="StringBuffer. js"/> 
type="text/javascript"> 



); 



function testToString( ) { 

var sb = new StringBuffer( ) ; 
sb. appendC'paraml") ; 
sb.appendC - "); 
sb.append("param2") ; 

assertEquals(sb.toString( ) , "paraml - param2"); 
} 
</script> 
</head> 
<body> 

<hl>Tests JsUnit: StringBuffer</hl> 
<p>Cette page contient les tests relatifs a la classe 
StringBuffer. </p> 
</body> 
</html> 
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JsUnit offre egalement la possibility de definir explicitement les fonctions de tests. 
L'outil fournit a cet effet la fonction exposeTestFunctionNames, qui retourne la liste des 
noms de ces fonctions. Par defaut, son implementation retourne la liste des fonctions de 
la page commencant par test. 

Le code suivant illustre la redefinition de cette fonction pour une page de test : 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
(...) 

<script language="JavaScript" type="text/javascript"> 
function exposeTestFunctionNames( ) { 

return ["testAppend" , "testToString"] ; 
} 

(...) 
</script> 
</head> 
<body> 

<hl>Tests JsUnit: StringBuffer</hl> 
<p>Cette page contient les tests relatifs a la classe 
StringBuffer.</p> 
</body> 
</html> 

Nous detaillons par la suite la facon de valider ou non un test. Dans l'exemple ci-dessus, 
les tests sont valides dans les conditions suivantes : 

• Si la methode append de l'instance sb ajoute la chaine passee en parametre a la fin du 
tableau interne de chaines de caracteres. 

• Si la methode toString de l'instance sb retourne une chaine de caracteres construite a 
partir de la concatenation des chaines contenues dans le tableau interne. 

Contexte d'execution des tests 

Dans JsUnit, le contexte correspond a un ensemble d'objets initialises pour une fonction 
de test. Ces objets sont instancies et initialises avant l'execution de la fonction de test 
puis liberes ensuite. 

Un cas de test est typiquement centre sur une ou plusieurs classes precises de 1' applica- 
tion. II est done possible de definir une ou plusieurs variables afin de les utiliser dans une 
ou plusieurs fonctions de tests du cas. L' ensemble de ces variables correspond au 
contexte d'execution des tests. Le contexte doit etre identique pour toutes les fonctions 
de tests. A cet effet, JsUnit offre la possibility d'ajouter des traitements avant et apres 
l'execution de ces fonctions afin de les gerer et de garantir ainsi l'independance des tests 
les uns par rapport aux autres. 



Outils annexes 



Partie VI 



Contexte et JsUnit 

Contrairement a JUnit, qui permet de realiser des tests unitaires en Java, le contexte n'est pas aussi cloi- 
sonne puisque ses elements sont globaux a la page dans laquelle s'executent les tests. Aussi convient-il 
d'etre particulierement prudent dans la realisation des tests afin de les rendre les plus independants les 
uns des autres. II est egalement tres important de bien liberer les objets initialises pour le test. 



Deux fonctions dont le nom est normalise permettent de gerer le contexte : la fonction 
setup pour son initialisation et la fonction tearDown pour sa liberation, setup est appelee 
avant l'execution, et tearDown a la fin de l'execution de chaque fonction de test. 

Le code suivant illustre 1' utilisation de ces deux fonctions avec l'exemple precedent : 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
(...) 

<script 1 anguage="JavaScript" type="text/javascript"> 
var sb = null ; 
function setUpO ( 

sb = new StringBuffer( ) ; 
} 
function tearDownO { 

sb = null ; 
} 

function testAppendO { 
sb.appendC'paraml") ; 
sb.appendC - "); 
sb.append("param2") ; 

assert Equal stsb.chaines Internes. length, 3) ; 
assert Equal stsb.chaines Internes [0] , "pa rami" ) ; 
assertEquals(sb.chainesInternes[l] , " - "); 
assert Equal stsb.chaines Internes [2] , "param2" ) ; 
} 

function testToString( ) { 
sb.appendC'paraml") ; 
sb.appendC - "); 
sb.append("param2") ; 

assertEquals(sb.toString( ) , "paraml - param2"); 
} 
</script> 
</head> 
<body> 

<hl>Tests JsUnit: StringBuffer</hl> 
<p>Cette page contient les tests relatifs a la classe 
StringBuffer.</p> 
</body> 
</html> 
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JsUnit definit en outre la fonction setUpPage, qui est appelee au chargement de la page de 
test et avant 1' execution des tests. L'execution des tests commence une fois que les traitements 
de cette fonction ont ete executes et que la valeur de la variable globale setUpPageStatus 
est egale a compl ete. 

Le code suivant illustre l'utilisation de cette fonction dans l'exemple precedent : 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
(...) 

<script language="JavaScript" type="text/javascript"> 
var sb = null ; 
function setUpPageO ( 

sb = new StringBuffer( ) ; 
setUpPageStatus = "complete"; 
} 
function setUpO { 

sb.cleart ) ; 
} 

function tearDownO { 
} 

//Les methodes du code precedent sont inchangees 
(...) 
</script> 
</head> 
(...) 
</html> 

Assertion et echec 

Dans les outils de la famille xUnit, les assertions permettent de specifier une valeur attendue 
pour un champ ou le retour d'une fonction. Si la valeur effective est differente de celle 
attendue, une erreur est levee. L'execution de la fonction de test est alors interrompue, et 
le test est considere comme echoue. 

Toutes les fonctions de ce type sont prefixees par assert et sont definies dans le fichier 
JavaScript jsUnitCore.js, localise dans le repertoire app/ de la distribution de JsUnit. 

On distingue plusieurs types de fonctions, suivant le type d'element sur lequel elles portent. 

Tout d'abord, JsUnit definit des fonctions d'assertion portant sur des types primitifs : 

function assert(obtenu) //Equivalente a assertTrue 

function assertTrue(obtenu) 

function assertFalse(obtenu) 

function assert Equal s(attendu.obtenu) 

function assertNotEquals(attendu.obtenu) 
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Les trois premieres fonctions verifient que la valeur ou l'expression en parametre est egale a 
true ou f al se. Les deux suivantes travaillent sur des types primitifs afin de verifier leur egalite. 
Aucune de ces deux dernieres fonctions ne permet de travailler sur des objets JavaScript. 

Pour ce faire, il convient d'utiliser les fonctions suivantes : 

function assertObject Equal s(objetAttendu.objetObtenu) 
function assertArrayEqual s(objetAttendu.objetObtenu) 

//Equivalente a assertObjectEquals 

Un autre type de fonction permet de verifier la validite ou la non-nullite d'une variable : 

function assertNull (attendu) ; 

function assert Not Nul 1 (attendu) ; 

function assertUndefined(attendu) ; 

function assertNotllndefined(attendu) ; 

function assertNaN(attendu) ; 

function assertNotNaN(attendu) ; 

Remarquons les fonctions permettant de tester si une variable est non definie (undefined) 
au sens JavaScript du terme et si un nombre est non valide (NaN, comme le resultat d'une 
division par 0, par exemple). 

L ensemble de ces fonctions peut egalement etre utilise avec un message en parametre 
afin de decrire plus precisement l'erreur. S'il est utilise, ce parametre doit toujours etre 
place en premiere position. 

Le code suivant en donne un exemple d' utilisation : 

Ivar maVariable = (...); 
assertEquals( "La valeur de la variable ne correspond pas", 
"valeur attendue", maVariable); 

Pour finir, il convient de noter la presence de la fonction f ai 1 permettant de faire echouer 
explicitement un test. Elle peut etre utilisee sans parametre ou avec un message et permet 
notamment de faire echouer un test si l'execution passe par un bloc non autorise. 

Le code suivant donne un exemple d' utilisation de cette fonction : 

try { 

var monlnstance = (...); 

monInstance.execute( ) ; 

failC'Une exception doit etre levee"); 
} catch(err) { 

(...) 
} 



Les suites de tests 

Afin de pouvoir enchainer plusieurs tests successivement, les outils de la famille xUnit 
definissent la notion de suite de tests. 

Comme une suite de tests est egalement un test, son execution est possible par l'intermediaire 
des differents lanceurs. Cette technique permet d'automatiser facilement l'execution 
d'un ensemble de tests. 
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JsUnit met en oeuvre la classe jsUnitTestSuite a cet effet. Notons que cette classe neces- 
site P inclusion du fichier JavaScript jsUnitCore.js, localise dans le repertoire app/ de la 
distribution de Poutil. 

La methode addTest 

La methode addTest permet d'ajouter un fichier HTML de test a une suite de tests d'apres 
son adresse. Toutes les fonctions identifiees dans le fichier comme etant des fonctions de 
test sont alors executees. 

Le code ci-dessous en donne un exemple de mise en ceuvre : 

Ivar myTestSuite = new top. jsllnitTestSuite( ) ; 
myTestSui te. addTes t Paget" tests /j sUnitAssertionTests.html ") ; 

Notons que la classe jsUnitTestSuite de ce code est prefixee par le mot-cle top. Ce dernier 
permet de resoudre le nom de la classe definie dans le fichier jsUnitTestSuite.js, fichier 
importe dans testRunner.html et non dans le fichier HTML de test. 

La methode addTestSuite 

La methode addTestSui te permet d'ajouter une suite de tests a une autre. Ainsi, toutes les 
fonctions de tests contenues dans la suite sont executees. 

Le code ci-dessous en donne un exemple de mise en oeuvre : 

function maSuiteDeTests( ) { 

var maSuiteTests = new top. jsUnitTestSuite( ) ; 

maSuiteTests. addTest Paget "tests/ jsUnitAssertionTests.html ") ; 

return maSuiteTests; 
} 

var testSuite = new top. jsUnitTestSuite( ) ; 
testSuite.addTestSuite(maSuiteDeTests( ) ) ; 

Mise en oeuvre d'une suite de tests 

Afin d'utiliser sa propre suite de tests pour un cas de test, il convient de mettre en oeuvre 
la fonction sui te, qui retourne un objet de type jsUni tTestSui te et permet de construire la 
suite de tests desiree. 

Le code suivant donne un exemple de mise en oeuvre de ce mecanisme : 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 

<meta http-equiv=" Content-Type" 

content="text/html ; charset=UTF-8"> 
<title>Tests JsUnit: suite</title> 
<link rel="stylesheet" 

type=" text /ess" href ="css/jsUnitStyle. ess "/> 
<script language="JavaScript" 

type=" text/ javascript" src="app/jsUnitCore. js"/> 
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<script language="JavaScript" type="text/javascript"> 
function suiteO { 

var maSuite = new top. jsUnitTestSuitet ) ; 
maSuite.addTest Paget "testStringBuffer.html " ) ; 
return maSuite; 
} 
</script> 
</head> 
(...) 
</html> 



Chargement de donnees pour les tests 

JsUnit offre un support afin de charger des donnees a partir de fichiers de differents 
formats. La mise en oeuvre de cette fonctionnalite utilise la propriete documentLoader du 
gestionnaire de tests du framework. 

La premiere etape consiste a charger les donnees du fichier en utilisant la fonction setUpPage, 
qui appelle la methode load de la propriete documentLoader. 

Le code suivant illustre le chargement de donnees d'un fichier dont le nom est specifie 
dans la variable uri (repere O). Ce fichier, nomme data.xml, est charge dans la fonction 
setUpPage (repere ©). 



<!D0CTYPE HTML PUBLIC 

<html> 
<head> 

<meta http-equiv="C 

content="text 

<title>Tests JsUnit 

< 1 ink rel="styleshe 

type="text/cs 

<script language="J 

type="text/ja 

<script language="J 

var uri = "test 

function setUpP 

setUpPageSt 

top.testMan 



'-//W3C//DTD HTML 4.01 Transitional //EN" 
'http://www.w3.org/TR/htnil4/loose.dtd"> 



ontent-Type" 

/html ; charset=UTF-8"> 

document Loader</title> 
et" 

s" href="css/jsUnitStyle.css"/> 
avaScript" 

va script" src="app/jsUnitCore. js"/> 
avaScript" type="text/javascript"> 
s/datas.xml " ; <-0 
age() { 

atus = ' running' ; 
ager. document Loader. cal lback 
= setUpPageComplete; 
top. testManager. document Loader. load( uri ) ; <-© 



function setUpPageComplete( ) 



if (setUpPageStatus = 
setUpPageStatus 



= 'running') 
complete' ; 



) 



(...) 
</script> 
</head> 
(...) 
</html> 
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Une fois les donnees chargees, la structure de stockage peut etre utilisee par 1' intermediate 
de la propriete buffer de documentLoader. Cette structure offre une propriete document arin 
de parcourir ces donnees avec les mecanismes DOM, comme l'illustre le code suivant : 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" 
"http://www.w3.org/TR/htnil4/loose.dtd"> 
<html> 
<head> 

<meta http-equiv=" Content-Type" 

content="text/html ; charset=UTF-8"> 
<title>Tests JsUnit: documentLoader </title> 
<1 ink rel="stylesheet" 

type=" text /ess" href ="css/jsUnitStyle. ess "/> 
<script language="JavaScript" 

type=" text/ javascript" src="app/jsUnitCore. js"/> 
<script language="JavaScript" type="text/javascript"> 
(...) 

function testDocumentLoader( ) { 
//L'element racine des donnees 
var root 

= top. testManager. documentLoader. documentElement; 
//La liste des balises contenues dans les donnees 
var buffer = top. testManager. documentLoader. buffert ) ; 
var elms = buffer. document. getElementsByTagName( "*") ; 
} 

(...) 
</script> 
</head> 
(...) 
</html> 



Execution des tests 

L' execution des tests avec JsUnit requiert des composants disponibles dans sa distribu- 
tion, lis consistent en differents lanceurs. Dans le cas d'une utilisation du module serveur 
de JsUnit, l'outil Java d'execution de taches Ant doit etre installe ainsi qu'une machine 
virtuelle Java. 

Ant est disponible a l'adresse http://ant.apache.org/ et Java a I'adresse http://java.sun.com/. Nous ne 
detaillons pas ici leur installation (pour plus d' informations, voir la documentation disponible 
sur leurs sites respectifs). 

Test Runner 

JsUnit fournit un lanceur Web, correspondant a une page HTML, qui permet d'executer 
des tests unitaires a la demande en se fondant sur le nom d'une page. Ce lanceur reprend 
l'interface graphique des differents lanceurs de JUnit dans le monde Java. Cette page 
correspond au fichier testRunner.html, localise a la racine de la distribution de l'outil. 
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Une barre horizontale verte (gris clair sur la figure 15.2) s'affiche lorsque tous les tests 
sont correctement executes. 
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Figure 15.2 

Interface graphique de JsUnit lorsque tous les tests sont correctement executes 



Une barre horizontale rouge (gris fonce sur la figure 15.3) s'affiche lorsque un ou plusieurs 
tests a echoue. 
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Figure 15.3 

Interface graphique de JsUnit lorsque un ou plusieurs tests a echoue 
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L'interface comporte quatre parties. La premiere permet de specifier le fichier HTML de 
tests et de lancer son execution. La seconde permet de specifier des parametrages relatifs 
notamment au niveau de traces et aux delais d'expiration des tests. 

La troisieme partie affiche les resultats des tests executes ainsi que les statistiques asso- 
ciees. La derniere partie donne acces a des informations supplementaires relatives aux 
echecs de tests. Ces informations sont accessibles en selectionnant les erreurs dans la liste 
puis en affichant leur detail (Show selected et Show all). 

Le lanceur JsUnit integre a Eclipse 

JsUnit fournit egalement un lanceur integre a Eclipse, qui permet d'executer des pages 
HTML de tests directement depuis cet environnement de developpement. 

Apres l'avoir installe dans Eclipse, il convient de configurer le lanceur, avec son repertoire 
d'installation, ainsi que les differents executables des navigateurs a utiliser. 

La figure 15.4 illustre la fenetre de configuration du lanceur dans Eclipse. Cette fenetre 
est accessible depuis l'element Preferences... du menu Fenetre de l'outil. 



Figure 15.4 
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Pour executer une page HTML de tests, le support a" execution interne d'Eclipse doit etre 
utilise. Ainsi, la page peut etre executee via le menu contextuel JsUnit Test Page. 

En cas de succes, la fenetre affiche une barre verte (gris clair sur la figure 15.5) et decrit 
la liste des fonctions de tests executees par page de test. 



5DSi^^^^ 
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; E1 B tr* 
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Figure 15.5 

Vue JsUnit integree a Eclipse (execution des tests avec succes) 



En cas d'erreurs dans les tests, la fenetre affiche une barre rouge (gris fonce sur la 
figure 15.6), et les tests en erreur sont signales par une croix. 
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Figure 15.6 

Vue JsUnit integree a Eclipse (erreurs dans V execution des tests) 
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Detaillons maintenant le support fourni par l'outil JsUnit permettant d'automatiser 
P execution des tests dans un ou plusieurs navigateurs. 

Automatisation des tests avec JsUnit Server et Ant 

JsUnit Server est un outil interessant, qui permet d'aller plus loin dans P automatisation de 
Pexecution des tests unitaires JavaScript. Cette automatisation s'appuie sur les facilites 
offertes par l'outil Ant, tout en Penrichissant de taches specifiques a JsUnit. Le principal 
interet d'une telle automatisation consiste en la verification automatique des dysfonction- 
nements et des non-regressions d'applications JavaScript dans differents navigateurs. II 
n'est alors pas necessaire de les jouer les uns apres les autres a la main. 

La conjonction du serveur de JsUnit et des taches Ant de JsUnit permet de mettre en 
oeuvre les trois fonctionnalites suivantes : 

• Stockage des resultats de tests JsUnit dans des fichiers XML de maniere similaire a 
JUnit. 

• Execution de tests JsUnit en local sur des navigateurs Web differents. 

• Execution de tests JsUnit sur des machines distantes (nous ne detaillons pas ici cette 
fonctionnalite). 



L'outil Ant 

Cet outil est communement utilise dans le monde Java afin d'automatiser les taches repetitives. Grace a 
ses fonctionnalites, son extensibilite et au grand nombre de taches disponibles, Ant permet de mettre en 
oeuvre facilement et rapidement des traitements evolues. L'outil permet en outre de specifier des enchai- 
nements de taches. Ainsi, I'enchainement des traitements suivants peut facilement etre mis en ceuvre : 
recuperation des sources dans CVS, compilation, packaging des binaires ou execution de tests unitaires. 
Cet outil Open Source est disponible a I'adresse http://ant.apache.org/. 



Afin de mettre en oeuvre ces fonctionnalites, le script Ant build.xml, localise a la racine 
de la distribution de JsUnit, doit etre utilise. Ce dernier est constitue de differentes taches, 
utilisables directement apres la configuration des variables du script. Ce fichier n'est pas 
un executable, mais il permet de parameter Pexecution de Ant. Cet outil utilise par 
defaut le fichier portant ce nom localise dans le repertoire d' execution. Le code suivant 
illustre Pexecution de Ant en ligne de commande : 

<JSUNIT_HOME>\jsunit > ant maTache 
Buildfile: build.xml 

maTache: 
(...) 

BUILD SUCCESSFUL 
Total time: 1 second 
<JSUNIT_HOME>\jsunit > 
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Les tableaux 15.2 et 15.3 recapitulent les differentes proprietes et taches contenues dans 
le script. 

Tableau 15.2 Proprietes du fichier build.xmlde JsUnit 



Propriete 

browserFil eNames 



cl oseBrowsersAfterTestRuns 

description 
ignoreUnresponsiveRemoteMachines 



logsDi rectory 



port 
remoteMachineURLs 

resourceBase 
timeoutSeconds 

url 



Description 

Correspond a la liste des executables des navigateurs a utiliser pour les tests. Cette 
propriete est utilisee uniquement lorsque des tests autonomes et locaux sont executes 
par lintermediaire de la tache standal one_test. Plusieurs navigateurs peuvent etre 
specifies. Les noms de leurs executables doivent etre separes par des virgules, 
comme ceci : c:\program files\internetexplorer\iexplore.exe, c:\program files\netscape\ 
netscape7. 1 \netscp.exe. 

Determine si JsUnit doit essayer de fermer les navigateurs apres I'execution des tests. 
Sa valeur par defaut est true. 

Permet de definir la description d'un serveur JsUnit. 

Permet, lors de la mise en ceuvre de tests distribues, d'ignorer les tests d'une machine 
si celle-ci ne repond pas. Si la value est true, une machine ne repondant pas n'est 
pas consideree comme une erreur. Dans le cas contraire (valeur a f al se), une erreur 
est ajoutee a la liste des erreurs. 

Permet de specifier I'endroit ou sont stockes les resultats des tests. La valeur peut cor- 
respondre a un chemin de repertoire aussi bien relatif qu'absolu. Si cette propriete est 
omise, les fichiers sont stockes dans un sous-repertoire logs/ sous la valeur de la pro- 
priete resourceBase. 

Permet de definir le port utilise par le serveur JsUnit. Par defaut, sa valeur est 8080. 

Permet de specifier la liste des machines de tests a utiliser. Les adresses doivent etre 
des adresses HTTP valides specifiant le protocole (http), le nom de la machine ainsi 
que le port utilise. Si plusieurs machines sont utilisees, leurs adresses doivent etre 
separees par des virgules, comme ceci : http://machine1.company.com:8080,http:/ 
/localhost:8080. 

Permet de specifier le repertoire de base pour le serveur JsUnit. Cette propriete n'est 
pas obligatoire. Si elle est omise, le repertoire courant est utilise par defaut. 

Permet de specifier la duree maximale (en seconde) que I'execution d'un test ne doit 
pas exceder. La valeur par defaut est 60. 

Permet de definir I'adresse ou executer les tests unitaires. Cette propriete est obliga- 
toire pour les tests autonomes et doit etre une adresse valide, comme dans file:///c:/ 
jsunit/testRunner.html?testPage=c:/jsunit/tests/jsUnitTestSuite.html. 
L'execution est effectuee par I'intermediaire de I'outil TestRunner.html. 



Tableau 15.3 Taches Ant du fichier build.xml de JsUnit 



Tache 


Depend de 


Description 


_compile_source 




Tache de compilation des sources Java de I'outil JsUnit 


_compile_tests 




Tache de compilation des tests JUnit de I'outil JsUnit 


_create_jar 


_compil e_source 


Tache de creation du fichier jsunit.jar 


_generateJsUnitPropertiesSample 




Tache de generation du fichier jsunit. properties. sample 


_run_al l_tests 


_create_jar 

_compile_tests 


Tache executant les tests unitaires de JsUnit 
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Tableau 15.3 Taches Ant du fichier build.xml de JsUnit (suite) 



Tache 


Depend de 


Description 


_run_unit_tests 


_compile_tests 


Tache executant les tests unitaires Java de JsUnit 


create_distribution 


_create_jar 
_run_unit_tests 


Tache permettant de creer la distribution JsUnit (JsUnit Server 
et taches Ant) 


distributed_test 




Execution des tests sur une ou plusieurs machines distantes 


standalone_test 




Execution des tests en local 


start_farm_server 




Demarrage de plusieurs serveurs JsUnit Server 


start_server 




Demarrage d'un serveur JsUnit Server 


stop_server 




Arret d'un serveur JsUnit Server 



Maintenant que nous avons detaille les differentes taches Ant fournies par l'outil JsUnit, 
detaillons la facon de mettre en oeuvre les deux premieres fonctionnalites precedemment 
citees, a savoir le stockage XML du resultat des tests et la configuration de 1' execution 
des tests dans differents navigateurs. 

Stockage XML du resultat des tests 

Afin de generer les resultats d' execution des tests au format XML, la tache Ant standal one_test 
doit etre utilisee. Elle permet de lancer un ou plusieurs navigateurs Web, d'y executer les 
tests et de recuperer les resultats afin de les sauvegarder au format XML dans un fichier. 

La figure 15.7 illustre ces mecanismes. 
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Figure 15.7 

Execution des tests dans JsUnit 
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Les variables suivantes du script Ant doivent etre positionnees : 

• browserFileNames, afin de definir les emplacements des executables des navigateurs. 
Plusieurs valeurs peuvent etre positionnees afin de realiser les tests dans plusieurs 
navigateurs. 

• 1 ogsDi rectory, afin de definir l'endroit oil sont ecrits les fichiers XML de resultat. 

• url , afin de specifier l'adresse du lanceur de JsUnit ainsi que de la page contenant les 
tests unitaires. 

La valeur de la variable url contenant le chemin du fichier de test a executer est de la 
forme suivante : 

file:///<JSUNIT_HOME>/jsunit/testRunner.html?testPage=<TESTS_HOME>/jsUnitMesTests.html 

Le code suivant illustre la structure d'un fichier XML contenant le resultat des tests : 

<browserResult n" d=" 1146827481781 " time="5.594"> 
<properties> 

<property name="browserFi 1 eName" 

val ue="C:/applications/firefox/fi refox.exe" /> 
<property name="browserId" value="0" /> 
<property name="jsUnitVersion" value="2.2" /> 
<property name="userAgent" 

value=" Mozilla/5.0 (Windows; U; Windows NT 5.1; 
fr; rv:1.8.0.2) Gecko/20060308 Fi refox/1.5.0.2 " /> 
<property name="remoteAddress" val ue="127. 0.0.1" /> 
<property name="url " 

value="file://<TESTS_HOME>/jsUnitMesTests.html" /> 
</properties> 
<testCases> 
<testCase 

name="file:///<TESTS_HOME>/ 

jsUnitStringBuffer.html :testAppend" time="1.375"> 
<failure>Expected <paraml> (String) but was <paramll> 
(String) Stack trace follows: > JsUnitException > 
_assert > assertEquals > testGetParaml</failure> 
</testCase> 
<testCase 

name="file:///<TESTS_HOME>/ 

jsUnitMesTests.html :testToString" time="1.156"> 
</testCases> 
</browserResul t> 

Remarquons que le fichier contient quelques informations relatives au navigateur qui a 
execute les tests. Ces dernieres sont localisees dans les balises property. Dans le fichier 
ci-dessus, les tests ont ete executes en local avec le navigateur Firefox en utilisant le 
fichier jsUnitStringBuffer.html. 

Notons pour finir que JsUnit ne fournit pas pour le moment d'outil permettant de generer 
de documentations a partir des fichiers XML de resultats. Comme le format XML utilise 
ne correspond pas a celui de l'outil JUnit, l'utilisation de la tache Ant junitreport de 
JUnit n'est pas possible. Le support de cet outil est cependant prevu pour une prochaine 
version. 
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Configuration de I'execution des tests dans differents navigateurs 

L' execution des tests se realise de la maniere decrite a la section precedente. Seule la 
configuration change avec la variable browserFileNames, qui doit desormais contenir 
plusieurs valeurs separees par des virgules. 

Pour I'execution successive de tests dans Firefox et Internet Explorer, la valeur de la 
variable a la forme suivante : 

I<property name="browserFileNames" 
value="C:/Program Files/Internet Explorer/IEXPLORE. EXE, 
C:/appl ications/firefox/firefox.exe"/> 

Dans ce cas, la tache Ant de JsUnit execute successivement les tests dans les differents 
navigateurs, comme l'illustre la figure 15.8. 
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Figure 15.8 

Execution des tests dans plusieurs navigateurs 



Dans ce cas d'utilisation de la tache Ant de JsUnit, plusieurs fichiers XML de resultats 
sont generes, correspondant au nombre de navigateurs configures. La structure de leur 
contenu est similaire a celle decrite a la section precedente. 
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Simulacres d'objets 

Si JsUnit offre des fonctionnalites permettant de mettre en oeuvre des tests, de verifier 
leur validite et de les executer de differentes manieres, il ne permet pas d'isoler les 
composants testes par rapport aux objets dont ils dependent. A cet effet, les simulacres 
d'objets, ou mock objects, peuvent etre utilises. Ils permettent de fournir des objets de 
substitution afin de verifier que les methodes sont correctement appelees et que les para- 
metres sont ceux attendus ainsi que de forcer leurs valeurs de retour. 

Avec cette technique, il est possible de tester les methodes utilisatrices de l'objet ainsi 
que leur facon d'interagir avec le simulacre. La mise en ceuvre de simulacres d'objets en 
JavaScript est relativement simple puisque le langage n'est pas type et que les objets y 
sont considered comme de simples tableaux de proprietes et de fonctions. 

L' implementation de simulacres consiste a initialiser un objet vide a partir d'un autre. 
Les methodes de cet objet possedent les memes noms que celles de l'objet de reference 
mais doivent etre vides. Avant 1' execution du simulacre, le test parametre ce simulacre 
avec les resultats attendus pour differentes methodes devant etre appelees. 

Bien que les simulacres JavaScript ne soient pas tres developpes, il en existe deux imple- 
mentations qui meritent d'etre detaillees. 

Implementation de simulacres simples 

Le site jpspan propose sur son wiki une implementation simple de simulacres d'objets 
JavaScript. 

Le code de cette implementation est disponible a l'adresse http://web.archive.org/web/ 
20050205085833/http://jpspan.sourceforge.net/wiki/doku.php?id=javascript:mock 

Son objectif est d'enregistrer le nombre d'appel de methodes d'un objet JavaScript. 
Avant toute chose, il est necessaire d'initialiser le simulacre a partir d'une classe, comme 
dans le code suivant : 

function testSimul acreSimple( ) { 

var simulacre = MockCreateCStringBuffer) ; 

(...) 
} 

A partir de ce moment, le simulacre contient les memes methodes que la classe initiale, 
mais ces dernieres ne retournent aucune valeur. II faut done configurer le simulacre afin 
de specifier les valeurs de retour desirees. 

Le code suivant illustre ce parametrage : 

(...) 

function testToString( ) { 

var simulacre = MockCreate(StringBuffer) ; 

simulacre. set ReturnVal ueC'toString" , "Mon resultat") ; 

(...) 
} 
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La methode toString peut des lors etre appelee sur le simulacre, qui renvoie desormais la 
valeur "Mon resultat". 

L implementation offre en outre la possibility de recuperer des informations relatives aux 
methodes appelees, comme dans le code suivant : 

(...) 

function testToString( ) { 

var simulacre = MockCreate(StringBuffer) ; 

simulacre. set ReturnVal ue( "toString" , "Mon resultat") ; 

simulacre. toString( ) ; 

alertC'La methode maMethode a ete appelee " 

+ simulacre. getCallCount("toString")+" fois"); 

alert( "L'argument du dernier appel de la methode est " 

+ simul acre. get LastCall Args( "toString" )[0]) ; 
} 

Implementation de simulacres fondee sur JsUnit 

La seconde implementation, en cours d'integration au framework JsUnit, est plus 
evoluee. Elle presente cependant le desavantage d'utiliser des fonctions de ce framework 
et ne peut done etre utilisee sans lui. 

Le code de cette implementation et une documentation sont accessibles aux adresses http:/ 
Mcampe.it/bzr/jsmock/et http://micampe.it/wiki/JavascriptMockObjects. 

Comme pour 1' implementation precedente, le simulacre doit etre initialise avec la classe 
cible. 

La mise en oeuvre de cette implementation consiste a specifier les parametres et les 
retours des methodes devant etre appelees pour un objet par 1' intermediate de la 
methode _expect. 

Le code suivant illustre cette configuration : 

(...) 

function testToString( ) { 

var simulacre = MockCreate(StringBuffer) ; 

s i mul ac re. _expect(" toString" , 

["Mon parametre"] , "Mon resultat"); 

(...) 
} 

Une fois ce parametrage realise, les differents appels de methodes sur le simulacre 
peuvent etre realises. 

La methode _veri fy du simulacre permet de verifier que l'execution correspond au resul- 
tat souhaite, comme dans le code suivant : 

(...) 

function testToString( ) { 

var simulacre = MockCreate(StringBuffer) ; 

s i mul ac re. _expect(" toString" , 

[], "Mon resultat"); 
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var resultat = simulacre. toString( ) ; 
simulacre. _verify( ) ; 
assertEquals(resul tat, "Mon resultat"); 



} 



L' implementation fournit egalement une methode _expectThrows afin de lever une exception 
sur l'appel d'une methode donnee. 

Le code suivant illustre l'utilisation de cette methode : 

(...) 

function test( ) { 

var simulacre = MockCreate(StringBuffer) ; 
simul acre. _expectTh rows ( "toString" , 

["Mon parametre"], "Une exception"); 
try { 

var resultat = simulacre. toStringC'Mon parametre"); 
fail("Pas d'exception levee"); 
} catch(err) {} 
simulacre. _verify( ) ; 
} 



Realisation des tests 

A la section precedente, nous avons decrit les principes de fonctionnement de JsUnit, 
principes similaires a ceux de JUnit dans le monde Java. Nous allons maintenant nous 
pencher sur la facon de mettre en oeuvre des tests dans des applications JavaScript dans le 
but de detecter d'eventuelles erreurs et d'ameliorer leur robustesse et leur qualite. 

Afin de decrire la fagon de mettre en ceuvre JsUnit, nous allons prendre pour exemple le 
composant graphique Sortabl eTabl e de la bibliotheque dojo. 

Commencons par creer la page de test contenant un tableau genere par 1' intermediate du 
composant Sortabl eTabl e : 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" 
"http://www.w3.org/TR/html4/loose.dtcl"> 



<html> 

<head> 

(.. 

<sc 

</s 

<sc 



.) 

ript language="JavaScript" type="text/javascript"> 
var djConfig = {isDebug: true, debugAtAll Costs: true 
cript> 
ript type="text/javascript" 

src="<DOJO_HOME>/dojo.js"X/script> 
<script 1 anguage="JavaScript" type="text/javascript"> 
dojo.requi re( "dojo. widget. Sortabl eTabl e" ) ; 
dojo.hostenv.writelncl udes( ) ; 
</script> 
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<style type="text/css"> 

(...) 
</style> 
</head> 
<body> 

<div class="tableContainer"> 

<table widget I d="testTable»dojoType=" Sort ableTable 

headClass="fixedHeader" tbodyClass="scrol 1 Content" 
enableMul tipleSelect="true" enableAl ternateRows="true" 
rowAl ternateClass="al ternateRow" eel lpadding="0" 
eel lspacing="0" border="0"> 
<thead> 
<tr> 

<th field="Id" dataType="Number">Id</th> 
<th field="Name" dataType="String">Nom</th> 
<th field="Description" dataType="String 

sort="asc">Description</th> 
</tr> 
</thead> 
<tbody> 

<tr><td>K/tdXtd>Nantes</td> 

<td>Prefecture de Loi re-Atlantique</tdX/tr> 
<tr><td>2</tdXtd>Paris</td> 

<td>Capitale de la France</tdX/tr> 
<trXtd>3</tdXtd>Saint-Nazaire</td> 
<td>Sous-prefecture de Loire-Atlantique</tdX/tr> 
</tbody> 
</table> 
</div> 
</body> 
</html> 

Maintenant que notre composant est en place, nous pouvons implementer la structure de 
notre test en specifiant tout d'abord la localisation des fichiers JavaScript de JsUnit 
necessaires : 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
(...) 
<link rel="stylesheet" type="text/css" 

href="file://<JSUNIT_DIR>/jsunit/css/jsUnitStyle.css"> 
<script language="JavaScript" type="text/javascript" 

src="file://<JSUNIT_DIR>/jsunit/app/jsUnitCore.js"X/script> 
<script language="JavaScript" type="text/javascript"> 

var djConfig = {isDebug: true, debugAtAll Costs: true }; 
</script> 
<script type=" text/ javascript" src=" ../../. ./dojo. js"X/script> 



Outils annexes 



Partie VI 



<script language="JavaScript" type="text/javascript"> 
dojo.requi reC'dojo.widget.SortableTable" ) ; 
dojo.hostenv.writelncl udes( ) ; 
function testExistenceTableau( ) { 
(...) 



function testChargementDonneesTableau( ) 
(. 



funct 
( 



) 



on testTriDonneesTableaut ) 
..) 



</script> 
</head> 
<body> 

<div class="tableContainer"> 
(...) 

</div> 
</body> 
</html> 

Nous implementons ensuite les trois fonctions de tests. La premiere, testExistenceTa- 
bl eau, verifie que le composant graphique a correctement ete cree et qu'il est possible de 
le referencer par l'intermediaire de la methode do jo. widget, by Id. La seconde, testCharge- 
mentDonneesTableau, verifie que les donnees du tableau ont ete correctement chargees par 
le composant. La troisieme, testTMDonneesTableau, verifie que le rendu du tableau est bien 
trie par rapport a la derniere colonne, comme specifie au moment de la creation du tableau. 

La premiere fonction de test verifie simplement que la methode do jo. widget, by Id de la 
bibliotheque dojo retourne une instance sur le composant : 

function testExistanceTableO { 

var monTableau - dojo. widget. byldC'monTableau") ; 

assertNotUndefined(monTableau) ; 

assert NotNull (monTableau) ; 
} 

La seconde fonction s'appuie sur la structure interne de stockage des donnees du tableau 
pour verifier que toutes les donnees specifiers sont presentes. Comme le composant 
stocke les donnees telles qu'elles sont definies, nous n'avons pas a nous soucier d'un 
eventuel tri. Puisque le composant definit les types des differentes colonnes, nous devons 
en tenir compte lors de la verification de leurs valeurs. La fonction assertObjectEquals 
doit etre utilisee car le composant gere les donnees sous forme d'objets : 

function testLoadTablet ) ( 

var monTableau - dojo. widget. byldC'monTableau") ; 
var donnees = monTableau. data; 
assert Equals (donnees. length, 3) ; 

//Premiere ligne 

var donneesPremiereLigne = donnees[0]; 
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assertObjectEquals(donneesPremiereLigne["Id"] ,1) ; 

as sertObject Equal s ( donnees Premiere Li gne[" Name"] , "Nantes" ) ; 

assertObjectEquals( 

donnees Premi ere Li gne[" Description"] , 

"Prefecture de Loi re-Atlantique" ) ; 
//Seconde ligne 

var donneesSecondeLigne = donnees[l]; 
assertObject Equal s( donneesSecondeLigne ["Id"] ,2) ; 
assertObject Equal s( donneesSecondeLigne ["Name"] , "Paris") ; 
as sertObject Equal s( donneesSecondeLigne ["Description"] , 

"Capitale de la France"); 
//Troisieme ligne 

var donneesTroisiemeLigne = donnees[2]; 
as sertObject Equal s( donneesTroisiemeLigne ["Id"] ,3) ; 
as sertObject Equal s( donneesTroisiemeLigne ["Name"] , 

"Saint-Nazai re" ) ; 
assertObjectEquals( 

donneesTroi si emeLigne[" Description"] , 

"Sous-prefecture de Loi re-Atlantique" ) ; 



) 



La derniere fonction de test s'appuie directement sur l'arbre DOM du composant afin de 
verifier la fonctionnalite de tri (ce dernier ne s'effectue qu'au moment de l'africhage par 
1' intermediate de la methode de rendu render) : 

function testTriDonneesTableau( ) { 

var monTableau=dojo. widget. by Id ("monTableau" ) ; 

var dom = monTableau. domNode; 

assert Equal sC dom. rows. length, 4) ; 

//Premiere ligne 

var premiereLigne = dom. rows [1]; 

as sertObject Equal s( premi ere Ligne. eel 1 s[0] ,"2" ) ; 

assertObject Equals (premiereLigne. eel ls[l] ."Paris" ) ; 

assertObject Equals (premi ere Ligne. cells [2] , 

"Capitale de la France"); 

//Seconde ligne 

var secondeLigne = dom.rows[2]; 

as sertObject Equal s(secondeLigne. eel ls[0] , "1" ) ; 

assertObject Equals (seconde Ligne. eel ls[l] , "Nantes" ) ; 

as sertObject Equals (seconde Ligne. eel Is [2] , 

"Prefecture de Loire-Atlantique") ; 

//Troisieme ligne 

var troisiemeLigne - dom.rows[3]; 

assertObject Equal s( troisiemeLigne. eel 1 s[0] , "3") ; 

assertObject Equal s( troisiemeLigne. cell s[l] , "Saint-Nazai re") ; 

assertObj ect Equal s( troisiemeLigne. cell s[2] , 

"Sous-prefecture de Loire-Atlantique"); 
} 
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Limites des tests unitaires avec JavaScript 

L' implementation de tests n'est pas toujours evidente, car certains mecanismes, tels les 
mecanismes asynchrones d'Ajax, en complexifient la mise en oeuvre. Ajax impose de 
surcroit des contraintes de securite. Par exemple, un appel utilisant cette technologie ne 
peut etre realise qu'a partir de la machine d'ou a ete chargee la page. Dans ce cas, le 
lanceur HTML de JsUnit doit lancer les pages de tests presentes sur un serveur HTTP. Ce 
serveur doit egalement etre la cible des appels Ajax des tests. 

Les tests unitaires peuvent cependant permettre de tester le bon fonctionnement des 
applications JavaScript a l'egard du declenchement d'evenements, puisque le langage 
permet de les simuler. Une telle simulation est toutefois specifique au navigateur. 

Par exemple, Firefox permet d'utiliser les facilites de DOM niveau 2 a cet effet. La 
methode createEvent de l'objet document cree l'evenement, puis l'appel a la methode 
initMouseEvent permet d'initialiser un evenement declenche par la souris. Finalement, la 
methode dispatchEvent permet de declencher l'evenement. 

Le code suivant illustre la mise en ceuvre de cette technique avec Firefox : 

var traiterEvenementAppelee = false; 
function traiterEvenement(evenement) { 

traiterEvenementAppelee = true; 
} 
function testSimulationEvenementsFirefox( ) { 

var elt = document. getElementByldC'monld") ; 

var evt = document. createEvent( "MouseEvents" ) ; 

evt.initMouseEventt "cl ick" , true, true, window, 
0, 0, 0, 0, 0, false, false, 
false, fal se, 0, nul 1 ) ; 

el t. dispatch Event (evt) ; 

if( ItraiterEvenementAppelee ) { 
failO; 

} 
} 



Conclusion 

Les tests unitaires ne sont pas exclusivement reserves aux langages « evolues » tels que 
Java, C++ ou .Net. A l'aide de JsUnit, un outil de la famille xUnit, il est possible de realiser 
des tests d' applications JavaScript afin de les rendre plus robustes et de verifier leur fonc- 
tionnement dans differents navigate urs. 

Dans un premier temps, nous avons detaille les principes permettant de mettre en oeuvre 
des cas de tests. Les developpeurs ayant deja utilise un outil de la famille xUnit y ont 
retrouve des mecanismes et fonctionnalites connus. 

Nous avons egalement vu que JsUnit proposait d'interessants mecanismes afin d'auto- 
matiser ces tests d' applications JavaScript dans differents navigateurs, et ce, aussi bien en 
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local que sur des machines distantes. Ces fonctionnalites ouvrent la perspective de les 
utiliser dans des outils d'integration continue, tels que CruiseControl, arm d'automatiser 
les verifications de non-regression. 

JsUnit n'offre malheureusement pas pour le moment la possibilite de formater les resultats 
des tests et ne supporte pas la tache Ant jurn'treport de 1'outil JUnit du monde Java. 

II faut cependant etre conscient que 1' implementation de tests n'est pas toujours evidente 
du fait des differents mecanismes utilises par JavaScript, notamment les mecanismes 
asynchrones d'Ajax. 
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Ce chapitre presente divers outils permettant de mettre en oeuvre un environnement 
convivial et productif pour implementer des applications JavaScript. 

Nous commencons avec des outils de developpement et de mise au point de code Java- 
Script, pour finir avec des elements permettant d'optimiser les applications Web fondees 
sur le langage JavaScript. 

Loin de se vouloir exhaustif, ce chapitre ne prend en compte que certains outils que les 
auteurs jugent incontournables. 

Outils de developpement 

Comme son nom l'indique, JavaScript est un langage de script. Un simple editeur de texte 
suffit done pour ecrire des programmes fondes sur ce langage. 

Des editeurs de texte avec coloration syntaxique permettent d'ameliorer la lisibilite du 
code mais pas de disposer d'un environnement de developpement convivial et productif. 

L' editeur de texte atteint ainsi rapidement ses limites, d'autant qu'il ne propose aucun 
automatisme d'aide a la saisie et encore moins de fonctionnalite permettant de mettre au 
point des scripts. 

L'outil ATF, plug-in d'Eclipse, apporte des solutions tangibles a ces difhcultes en proposant 
un environnement complet pour le codage et le debogage des applications JavaScript. 
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ATF (Ajax Toolkit Framework) 

L'outil Open Source ATF fournit une extension a Eclipse arin de mettre a disposition un 
environnement complet pour le developpement d' applications Web. 



Eclipse 

Eclipse est une plate-forme de developpement Open Source extensible et adaptable grace a I'adjonction 
de plug-in. Cet environnement de developpement se veut universel, de par sa faculte a integrer toutes 
sortes de fonctionnalites. Le sous-projet WTP (Web Tools Platform) d'Eclipse ajoute un ensemble de fonc- 
tionnalites liees au Web, notamment un editeur HTML, un editeur de feuilles de style CSS et un editeur 
JavaScript. 



ATF enrichissant la distribution WTP (Web Tools Platform) de fonctionnalites supple- 
mentaires, le prerequis a l'installation d'ATF est de disposer d'un environnement WTP, 
telechargeable a l'adresse http://www.eclipse.org/webtools/. Une fois WTP installe, il ne reste 
plus qu'a installer ATF, disponible a l'adresse http://www.eclipse.org/atf/. 

Fonctionnalites de base 

ATF offre un environnement de developpement JavaScript complet, incluant des fonc- 
tionnalites de verification de la syntaxe lors de la saisie. II propose egalement l'autocom- 
pletion de code, qui apporte une aide a la saisie de code en proposant les methodes ou 
attributs disponibles pour un objet donne. 

Nous n'abordons dans cette section que les fonctionnalites relatives au langage Java- 
Script, mais ATF propose tout un panel de fonctionnalites permettant d'ecrire des pages 
HTML et de mettre en oeuvre les styles CSS. 

ATF permet de tester les applications Web directement dans l'outil, sans avoir a recourir 
a un navigateur externe. Cette fonctionnalite est rendue possible grace a 1' integration du 
navigateur Mozilla. 

De meme, le debogage des scripts JavaScript est disponible directement dans l'outil, sans 
necessiter de debogueur externe. L' inspection de l'arbre DOM, qui permet de visualiser 
la representation en memoire d'une page Web, est egalement fondee sur ce principe. 

La figure 16.1 illustre 1' interface graphique proposee par ATF dans 1' environnement de 
developpement Eclipse. 
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Figure 16.1 

Interface graphique de I 'outil ATF 



Nous pouvons voir les principales aides a la saisie relatives au langage JavaScript, ainsi 
que celles permettant d'afficher les methodes d'objets DOM par 1' intermediate d'un 
cadre contenant les methodes disponibles. Les lignes contenant des erreurs de syntaxe 
sont soulignees. 

Support de bibliotheques JavaScript 

Outre la coloration syntaxique du langage JavaScript, de 1' autocompletion et de la verifi- 
cation de la syntaxe a la saisie, ATF propose un ensemble d' assistants permettant de 
generer du code. 

II offre des assistants pour generer les squelettes autour de la bibliotheque dojo et permettre 
notamment la creation de nouveaux composants graphiques dojo. 
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La figure 16.2 illustre la mise en oeuvre de ce dernier assistant. 
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Figure 16.2 

Assistant de generation de composants graphiques dojo 



p. Hofle de naval 



Cet assistant permet de generer les differents elements definissant un composant graphi- 
que dojo, en particulier le template, la feuille de style, ainsi que la classe JavaScript 
contenant la structure d'un widget. 

Le code suivant detaille la classe JavaScript d'un composant graphique genere en se fondant 
sur P assistant dojo : 

do jo. provide ("do jo. widget. monWidget" ) ; 
dojo. requi re( "do jo. event.*") ; 
dojo.requi re ("do jo. widget.*" ) ; 
dojo. requi re( "do jo. graphics.*") ; 
dojo. requi re( "dojo.fx.html ") ; 
dojo.requi re( "dojo. style") ; 
dojo. widget. monWidget = function(){ 

do jo. widget. Html Widget. cal 1 (this) ; 

this. tempi atePath = dojo.uri .dojoUri ("src/widget/templates/monWi dget.html " ) ; 
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this. tempi ateCssPath = dojo.uri .dojollri ( "src/widget/ tempi ates/monWidget.css" 
// attributs herites 
this.isContainer = true; 
this.widgetType = "monWidget"; 

/* 

* Modifier le template HTML 

*/ 
this.fil 1 InTemplate = function(args, frag){ 



do jo. inherits (do jo. widget. monWidget, do jo. widget .Html Widget) ; 
do jo. widget. tags. addParseTreeHandler( "dojo: monWidget" ) ; 

D'autres assistants, portant le nom de snippets, permettent d'ajouter les composants 
graphiques de dojo dans une page HTML. 

Ces assistants proposent diverses boites de dialogue afin de parametrer le composant 
graphique. 

La figure 16.3 illustre la boite de dialogue relative au parametrage du composant graphi- 
que Fl oati ngPane. Ce composant graphique est une fenetre qu'il est possible de deplacer. 



Figure 16.3 

Boite de dialogue pour la saisie 
des proprietes de la FloatingPane 
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La selection du bouton Insert dans la boite de dialogue produit le code HTML suivant : 

<div dojoType=" FloatingPane" 

widgetId="floatingPaneId" 

title="Pane Title" 

constrainToContainer="l" 

style="width: lOOpx; height: lOOpx; left: lOpx; top: 10px;"> 
</div> 

Loutil ATF offre un environnement de developpement complet, dont nous n'avons 
presente que quelques fonctionnalites, permettant de mettre en oeuvre des applications 
Web et, surtout, de les mettre au point. 

Ces fonctionnalites se revelent precieuses pour developper des applications JavaScript 
productives. 
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Notons neanmoins que cet outil est tres oriente Java/J2EE et qu'il impose un serveur 
J2EE pour deboguer les applications JavaScript. De plus, ATF supporte de nombreuses 
bibliotheques JavaScript, mais pas encore la version 0.3 de dojo. 

Outils de debogage 

La mise au point des traitements des applications JavaScript peut s'averer tres fastidieuse 
sans outil adapte. Cette section presente divers outils destines a ameliorer la productivity 
lors de la recherche de dysfonctionnements. 

Ces outils evitent les debogages fondes sur des messages d'alerte (fonction alert), qui 
atteignent rapidement leurs limites et deviennent fastidieuses. 

Console JavaScript de Firefox 

Le navigateur Firefox est dote d'une console JavaScript permettant de recueillir l'ensem- 
ble des erreurs, avertissements ou messages JavaScript. Cette console est accessible par 
le biais du menu Outils. 

Des qu'une erreur est levee, une ligne apparait dans la console indiquant le contexte de 
l'erreur, le nom du fichier ainsi que le numero de ligne. A partir de ces informations, il est 
relativement facile d'identifier les erreurs lors de l'execution. 

Pendant la phase de mise au point du script, nous conseillons d'ouvrir en permanence 
cette console afin de verifier son bon fonctionnement. 

La figure 16.4 illustre l'interface de la console. 
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Figure 16.4 

Console JavaScript de Firefox 
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La console JavaScript conserve routes les erreurs qui se sont produites dans les pages 
Web visitees. Elle ne permet cependant pas de filtrer les erreurs par rapport a une page 
Web ou a un script particuliers. Pour visualiser les erreurs d'une seule page, il faut au 
prealable nettoyer la console par l'intermediaire du bouton Effacer. 

FireBug pour Firefox 

Le debogage JavaScript dans Firefox passe par 1' installation d'extensions de ce naviga- 
teur. Ce chapitre n'ayant pas pour objectif de presenter de maniere exhaustive toutes les 
extensions disponibles, il se concentre a titre d'exemple sur l'extension FireBug. 

Developpee par Joe Hewitt, FireBug est disponible a l'adresse https://addons.mozilla.org/fire- 
fox/1843/. Apres son installation, les fonctions de debogage sont accessibles par l'interme- 
diaire des menus Outils/FireBug. 

Cette extension permet de deboguer des scripts JavaScript pas a pas en suivant les appels 
de methodes et de visualiser ainsi la valeur des objets presents. Une console donne la 
possibilite de ne visualiser que les erreurs de la page courante. Le developpeur peut de la 
sorte cibler au mieux l'endroit ou sont declenchees les erreurs. 

Avec FireBug, il est possible d'executer a la volee du code JavaScript et de declencher 
ainsi n'importe quelle methode dans le contexte d' execution de la page HTML. 

Un inspecteur Dom permet de visualiser en detail l'arbre DOM de la page Web. Cette 
fonctionnalite s'avere particulierement adaptee lorsque l'arbre Dom est modifie dynami- 
quement en JavaScript. 

FireBug propose enfin un module d' analyse des flux echanges avec Ajax, et plus particu- 
lierement par le biais de la classe XMLHttpRequest. 

Ann d'illustrer le fonctionnement de ce debogueur, prenons le code source suivant : 

<html> 
<head> 

<title>FireBug</TITLE> 

<script type="text/javaScript"> 

// fonction contenant du code en erreur 
function fonctionEnErreur( ) { 

AlErtCtest console") ; <-© 
} 

// mise en oeuvre de 1 'inspecteur Dom 
function utilisationInspecteurDom( ) { 

var zone = document. getElementByldC'maZone") ; 

var lbl = document. createElement( "label "); <-© 

var txt = document. createTextNodeC'l ibelle") ; 

lbl .appendChild(txt); 

zone.appendChilddbl ) ; 
} 

// utilisation du debogueur pas a pas 
function calcul ( ){ 

var i=0; 
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var j=0; 
for (1-0: i < 
i = i + 2; 



10; i++)l 



</script> 
</head> 
<body onload="fonctionEnErreur( )"> 

<div id="maZone"> 

</div> 

<input type="button" 

oncl i ck=" utilisation I nspecteurDom( )" 
val ue="Iinspecteur D0M"> 

<input type="button" oncl ick="cal cul ( )" value="Calcul "/> 
</body> 
</html> 

Le code ci-dessus contient volontairement une erreur de syntaxe au repere O. Lors de 
l'ouverture de cet exemple, la console presente 1' erreur comme illustre a la figure 16.5. 
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Figure 16.5 

Affichage d'une erreur dans la console de FireBug 

Notons la precision avec laquelle FireBug localise 1' erreur de syntaxe. 

Nous allons a present utiliser l'inspecteur DOM arin de visualiser la creation dynamique 
d'une balise 1 abel (repere ©). 

Le clic sur le bouton Inspecteur Dom permet de declencher l'ajout de l'etiquette sur la 
page. L'inspecteur DOM (onglet Inspector) affiche l'ajout de la balise label, comme 
illustre a la figure 16.6. 
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Figure 16.6 

L'inspecteur DOM de FireBug 
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L'inspecteur DOM permet de visualiser toute la structure en memoire de la page HTML 
ainsi que les feuilles de style ou encore les scripts. 

Comme indique precedemment, le debogueur permet de suivre l'enchainement pas a pas 
du code et d'evaluer les variables au cours de l'execution. 

Comme tout debogueur, son utilisation repose sur la pose de points d'arret. Ces derniers 
lui indiquent les instructions sur lesquelles nous souhaitons arreter l'execution arm 
d'analyser le code. 

Le debogueur de FireBug est accessible via l'onglet Debugger, qui affiche a son ouver- 
ture le code source de la page. A ce stade, l'ajout de points d'arret s'effectue par simple 
clic sur une ligne. lis sont represented visuellement par un rond rouge. 

Si nous placons dans le code precedent un point d'arret sur la fonction cal cul en cliquant 
sur la premiere ligne de cette fonction, lors de l'appel de cette fonction par un clic sur le 
bouton Calcul present dans la page Web, une ligne en surbrillance indique que l'execution 
s'est arretee au debut de cette fonction. 

La figure 16.7 illustre cette mise en oeuvre. 
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Figure 16.7 

Debogage pas a pas dans FireBug 

II est desormais possible d'executer le code pas a pas par l'intermediaire des boutons de 
commande situes au bas de l'onglet Debugger. Lors de l'avancement des instructions, les 
valeurs des differentes variables sont presentees comme illustre a la figure 16.8. 
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Figure 16.8 

Visualisation des variables pendant le debogage dans FireBug 

Comme nous l'avons vu, l'extension FireBug propose de nombreuses fonctionnalites 
indispensables pour mettre au point et corriger des dysfonctionnements de scripts ecrits 
en JavaScript dans le navigateur Firefox. 



Debogage dans Internet Explorer 

Le debogage de script JavaScript est egalement possible dans le navigateur Internet 
Explorer par 1' intermediate de l'outil Microsoft Script Debugger. 

Accessible depuis le centre de telechargement de Microsoft, cet outil permet de visuali- 
ser le code JavaScript afin de poser des points d' arret et d'executer le code pas a pas. 

Script Debugger donne la possibility de visualiser et modifier des variables a partir d'une 
fenetre de commande ainsi que de voir la pile d' execution. Cette derniere fonctionnalite 
permet de suivre l'enchainement des appels de methodes. 

Une fois installe, le debogueur est accessible via les menus Affichage/Debogueur de 
script/Ouvrir. 

Afin de presenter ses differentes fonctionnalites, reprenons l'exemple de la section prece- 
dente. 

Lors de l'ouverture de la page contenant cet exemple, une boite de dialogue s'ouvre et 
affiche une erreur de syntaxe. A partir de cette boite de dialogue, le debogueur peut etre 
lance afin d'indiquer la ligne en erreur. Cette derniere est alors presentee surlignee en 
jaune. 
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La touche de fonction F9 permet de poser un point d' arret sur une ligne selectionnee, 
lequel est represents par des ronds rouges. 

La figure 16.9 illustre la pose d'un point d'arret dans la fonction cal cul . 
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Figure 16.9 

Specification de points d'arret dans Internet Explorer 

Une fois les points d'arret poses, il ne reste plus qu'a cliquer sur le bouton Calcul de la 
page Web afin d'atteindre le premier. La touche de fonction F8 permet alors 1' execution 
pas a pas des instructions. 

A la difference de FireBug, les valeurs des variables ne sont pas affichees, leur visualisa- 
tion restant a l'initiative de l'utilisateur par l'intermediaire de la fenetre de commande. 



Outils annexes 



Partie VI 



La figure 16.10 illustre la visualisation de la variable j de notre exemple. 
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Figure 16.10 

Visualisation des variables lors de V execution pas a pas dans Internet Explorer 

Le debogueur de script pour Internet Explorer fournit les fonctionnalites majeures 
permettant de deboguer des scripts JavaScript, a l'exception du navigateur DOM, pourtant 
tres utile pour la mise en oeuvre d' applications JavaScript. 



Debogage avec dojo 

Du fait du chargement dynamique des modules de dojo, le debogage dans cette bibliotheque 
s'avere delicat. 

Les scripts etant charges a la volee par le biais d'une requete Ajax puis etant evalues 
dynamiquement au moyen de la fonction eval, le debogage n'est pas permis. Pour le 
rendre possible, il faut modifier la strategie de chargement des scripts. 

La propriete debugAtAl 1 Costs de la configuration dojo (objet djCOnfig) permet de charger 
differents scripts en se fondant sur l'ajout dynamique d'une balise script dans l'en-tete 
de la page Web. 
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Le code suivant fournit un exemple d'activation du debogage (repere O) lors de la confi- 
guration de la bibliotheque dojo : 

djConfig = { 

isDebug: true, 

debugAtAll Costs: true<-0 
}; 

La propriete debugAtAll Costs doit etre activee uniquement lors de la phase de mise au 
point ou de recherche de dysfonctionnements et ne doit en aucun cas etre utilisee en 
production, car son impact sur les performances est loin d'etre negligeable. 

Detection des fuites memoire 

Le langage JavaScript s'appuie sur un ramasse-miettes (garbage collector) pour liberer la 
memoire utilisee en otant de la memoire tous les objets qui ne sont plus references. 

Le mecanisme de garbage collector est en realite tres complique, car il doit verifier tous 
les objets du DOM et tous les objets utilises par le JavaScript. Internet Explorer dispose 
d'un garbage collector pour les objets JavaScript et un autre pour ses objets natifs. II 
arrive frequemment qu'une reference circulaire entre un objet natif et un objet JavaScript 
empeche le bon fonctionnement de la liberation de la memoire. 

Des outils tels que Drip permettent de detecter les fuites memoires dans le navigateur 
Internet Explorer. 

Disponible a l'adresse http://outofhanwell.com/ieleak/index.php, Drip permet de suivre l'utilisation de 
la memoire. 

Pour Firefox, l'extension Leak Monitor, disponible a l'adresse https://addons.mozilla.org/fire- 
fox/2490/, ne permet de detecter qu'un type de fuite memoire : les objets restes en memoire 
alors que la page HTML qui les avaient crees a ete fermee. 



Outils de documentation 

Dans toutes les applications, la documentation est tres importante des lors que nous 
souhaitons les perenniser et les maintenir. 

Les scripts JavaScript n'echappent pas a cette regie. 



jsDoc 



A l'instar de Javadoc pour Java, jsDoc, disponible a l'adresse http://jsdoc.sourceforge.net, 
offre la possibilite de documenter des applications JavaScript. 



Outils annexes 



Partie VI 



La documentation est generee au format HTML a partir de balises placees dans les 
commentaires. Les diverses balises supportees sont recapitulees au tableau 16.1. 



Balise 

©argument 

©author 

©class 

©constructor 

©depracated 

©extends 

©fileoverview 

©final 

©ignore 

©param 

©private 

©requires 

©return 

©see 

©throws 
©type 



Tableau 16.1 Balises supportees par I'utilitaire jsDoc 

Description 

Identique a ©param 

Specifie I'auteur de la fonction ou du fichier JavaScript. 

Permet d'inclure de la documentation sur la classe. 

Indique que la fonction est le constructeur de la classe. 

Informe que la classe ou la fonction est depreciee et ne doit plus etre utilisee. 

Indique que la classe herite d'une autre classe. 

Positionnee au debut d'un fichier JavaScript, permet de documenter le fichier. 

Indique que la valeur est une constante. 

Permet de ne pas documenter une methode. 

Permet de donner des informations sur les parametres d'une fonction. Le type du parametre peut etre indi- 
que entre accolades : /*@param {String} nomParametre. 

Signifie que la fonction ou la classe sont privees et qu'elles ne figureront pas dans la documentation, excepte 
si I'option -pri vate est utilisee dans la ligne de commande. 

Indique une dependance avec une autre classe. 

Permet de donner des informations sur le retour de la fonction. 

Specifie un lien avec une autre classe ou une autre methode. Le lien avec une autre methode s'ecrit de la 
maniere suivante :@see #nom_methode. Le lien avec une autre classe s'ecrit :@see nom_classe. 

Indique les exceptions que la methode peut declencher. 

Indique le type de retour d'une methode. 

Specifie la version du fichier JavaScript ou de la classe. 



Pour mieux comprendre l'utilisation des balises dans jsDoc, prenons l'exemple suivant 

I** 

* ©fileoverview Ce ficher permet de mettre en oeuvre jsDoc 

* ©author ago 

* ©version 0.1 

*/ 

I** 

* Construit un nouvel objet Utilisateur 

* ©class Util isateur 

* ©constructor 

* ©throws MemoryException 

* ©return un nouvel objet Utilisateur 
*/ 
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function Uti 1 i sateur ( ) { 
/** 

* retourne le nom de la classe 

* ©type String 
*/ 

this.getClassName = function(){ 

) 
} 
/** 

* Renvoi e le nom de V uti li sateur 

* ©returns le nom de 1 ' uti 1 i sateur 

* ©type String 

* ©author ago 
*/ 

Util isateur. prototype. getNom = function(){ 

} 

/** 

* positionne le nom de 1 'util isateur 

* ©param {String} nom de 1 'util isateur 
*/ 

Util isateur. prototype. setNom = function(_nom){ 
this. nom = _nom; 

} 

/** 

* renvoie 1'age de 1 'util isateur 

* ©type int 

* ©depracated ne plus utiliser 
*/ 

Uti 1 isateur. prototype. getAge = function(){ 

} 
/** 

* Cree un objet Administrateur 

* ©extends Utilisateur 

* ©class Administrateur est une classe qui herite de 

* (©link Utilisateur} 
*/ 

function Administrateurt ) { 
} 

La generation de la documentation se realise par le biais de la commande perl suivante : 

> jsdoc.pj nom_fichier. js 

Elle permet d'obtenir le resultat illustre a la figure 16.1 1. 

Comme nous le constatons, la documentation est generee sous forme de pages Web. Les 
differents liens donnent la possibility de naviguer dans les elements de la documentation. 

L'utilitaire jsDoc permet de documenter tous les objets definis dans les scripts JavaScript. 
Notons que plus le code source est commente, meilleure est la documentation generee. 
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Figure 16.11 

Exemple de documentation generee avec I'utilitaire jsDoc 

Outils d'optimisation 

Une des optimisations possibles pour ameliorer le temps de chargement des scripts consiste 
en leur compression. Cette derniere permet de reduire la taille des fichiers et en consequence 
de reduire significativement le temps de chargement par un navigateur. 

Un second axe d'optimisation est lie au chargement dynamique des scripts. Cet axe 
consiste a limiter le nombre d'appel serveur et ainsi a reduire le temps de chargement. 



Outils de compression 

Plusieurs outils permettent de compresser les scripts en supprimant les espaces, les 
commentaires et les retours a la ligne. 

La communaute dojo propose un outil qui va beaucoup plus loin en ce qu'il ajoute le 
renommage des variables au moyen de noms plus courts. 



Outillage 



Chapitre 16 

L'outil de compression dojo est fourni sous la forme d'un utilitaire Java telechargeable a 
l'adresse http://dojotoolkit.org/docs/compressor_system.html. S'appuyant sur le moteur Rhino, il 
permet d' interpreter des scripts JavaScript et de reduire la longueur des noms de variables. 

Son execution requiert au minimum une machine virtuelle Java 1 .4. 

Le lancement de l'outil de compression sur l'exemple presente a la section precedente 
donne le resultat suivant : 

function Uti 1 i sateur ( ) { 

this.getCl assName=function( ){ 

}; 

} 

Util i sateur. prototype. getNom=functi on ( ){ 

}; 

Util i sateur. prototype. setNom=functi on (_1){ 

this.nom=_l; 

}; 

Util i sateur. prototype. getAge=functi on ( ){ 

}; 

function Administrateur( ){ 

} 

Remarquons que les commentaires ont ete supprimes et que le parametre nom de la 
methode setNom a ete remplace par le parametre _1. La taille du script JavaScript est ainsi 
passee de 1 068 a 237 octets. 

Chargement dynamique 

L'utilisation de classes en JavaScript consiste souvent a creer autant de fichiers source 
JavaScript que de classes. Cette methode permet de se rapprocher du stockage des classes 
dans le langage Java. Ces classes, ou plus exactement ces fichiers de script, sont ensuite 
charges a la demande par le navigateur Web. 

La bibliotheque dojo utilise ce concept pour son decoupage en classes. Le chargement 
dynamique des classes est ensuite effectue a la demande par une requete Ajax permettant 
de ramener sur le navigateur le contenu du fichier script puis de l'evaluer. 

Ce mode de chargement requiert autant d'appels Ajax qu'il y a de classes a charger. Or il 
est important de noter que l'appel d'un grand nombre de requetes Ajax penalise forte - 
ment les temps de reponse. Chacune des requetes Ajax n'est autre qu'une requete HTTR 

Pour limiter le nombre de ces requetes et ainsi optimiser le temps de chargement des 
pages Web, il est preferable de regrouper dans un meme fichier JavaScript les classes les 
plus utilisees. L'ensemble des petites requetes Ajax sera ainsi remplace par quelques 
grosses requetes Ajax, ce qui aura pour effet de diminuer le temps de chargement des 
scripts JavaScript. 
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Conclusion 



Ce chapitre a presents differents outils permettant d'etre plus productifs lors des phases 
de developpement, de mise au point et de recherche de dysfonctionnements avec le 
langage JavaScript. 

L'utilitaire jsDoc montre que la generation d'une documentation de bonne facture est 
egalement possible. Trop souvent negligee, cette documentation est essentielle pour 
assurer la maintenance des applications contenant du JavaScript. jsDoc n'est cependant 
utilisable qu'a condition qu'un reel effort d'ecriture de commentaire ait ete effectue au 
prealable. 

Les derniers points abordes dans ce chapitre proposent des pistes d' amelioration visant a 
optimiser les temps de chargement des scripts. Cela peut s'effectuer aussi bien au niveau 
du poids des scripts JavaScript que de la maniere de les charger. 
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